Vue.js(五)

vue

前后端交互概述与URL地址格式

JS中常见的异步调用:

定时任务

ajax

事件函数

接口调用方式:

原生ajax

基于jQuery的ajax

fetch

axios

url 地址格式:

传统的url

Restful形式的url

Promise(主要解决异步操作深层调用的问题)

Promise的作用:

把回调函数代码分离出来,在异步操作执行完后,用链式调用的方法执行回调函数。

Promise有三种状态:

pending(进行中),resolved(完成),rejected(失败)。只有异步返回的结构可以改变其状态。

promise 的过程一般只有两种:

pending->resolved

pending->rejected

promise 对象还有一个比较常用的then方法,用来执行回调函数:

then 方法接受两个参数,第一个是成功的 resolved 的回调,另一个是失败 rejected 的回调,第二个失败的回调参数可选。

并且 then 方法里也可以返回 promise 对象,这样就可以链式调用了。

Promise api(ES6)

  1、Promise.resolve()

  2、Promise.reject()

  3、Promise.prototype.then() //串行执行任务(不论成功或失败都会被调用)

  4、Promise.prototype.catch() //reject只会将参数传递给catch方法

  5、Promise.all() //所有的都有完成,相当于“且”,返回结果数组(并行执行任务)

  6、Promise.race() //完成一个即可,相当于“或”

基本使用

<script type="text/javascript">

/**

* 基于Promise发送 原生Ajax请求

*/

function queryData(url) {

var p = new Promise(function (resolve, reject) {

//获取对象

var xhr = new XMLHttpRequest();

//回调函数

xhr.onreadystatechange = function () {

if (xhr.readyState != 4) return;

if (xhr.readyState == 4 && xhr.status == 200) {

//处理正常的情况:一旦调用 resolver 就会调用下一步的 then

resolve(xhr.responseText);

} else {

//处理异常情况

reject('服务器错误');

}

};

//获取连接

xhr.open('get', url);

//发送请求

xhr.send(null);

});

return p;

}

//发送多个Ajax请求并且保证顺序

queryData('http://localhost:3000/data')

.then(function (data) {

console.log(data)

return queryData('http://localhost:3000/data1');

})

.then(function (data) {

console.log(data);

return queryData('http://localhost:3000/data2');

})

.then(function (data) {

console.log(data)

});

</script>

promise 链式调用时 then 的返回值

then 方法里接受两个函数作为参数,分别是 resolve 和 reject 后执行的回调。

他返回的是一个新的 Promise 实例(不是原来那个 Promise 实例)。

return 值(无return的情况下就返回undefined,也是返回值):

在后面的then中就可以接收到数据了。

throw error:

返回的 Promise 会成为Rejected(已失败)的状态,下一步执行catch中的回调函数或者then的第二个回调函数参数。

catch为then的语法糖,它是then(null,rejection)的别名,也就是说catch也是then,它用于捕获错误。

return Promise:

手动return Promise, 能够按顺序执行每个异步回调中的内容。

Ajax 使用步骤

1.创建XmlHttpRequest对象

2.注册监听的回调函数

3.调用open方法设置基本请求信息

4.设置发送的数据,发送请求

JQuery Ajax

JQuery ajax 是对原生XHR的封装

$.ajax({

type: 'POST',

url: url,

data: data,

dataType: dataType,

success: function () {},

error: function () {}

});

XMLHttpRequest 和 Ajax 的关系

ajax 最核心的依赖是浏览器提供的 XMLHttpRequest 对象。

所以我用一句话来总结两者的关系:我们使用XMLHttpRequest对象来发送一个Ajax请求。

fetch( fetch() 返回的是一个Promise对象 )

fetch api 可以结合 async 和 await 来使用的。 

fetch 是一种 HTTP 数据请求的方式,是 XMLHttpRequest 的一种替代方案。

fetch 不是 Ajax 的进一步封装,而是原生js。

Fetch函数就是原生js,没有使用XMLHttpRequest对象。

1、第一个参数是URL,第二个是可选参数,可以控制不同配置的 init 对象( fetch(url, options).then() )

2、使用了 JavaScript Promises 来处理结果/回调

fetch('http://localhost:3000/data')

.then(function(data){

//text()方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据

return data.text();

}).then(function(data){

//在这个then里面我们能拿到最终的数据

console.log(data);

})

//GET请求

fetch('http://localhost:3000/books?id=123', { //restful形式的URL:http://localhost:3000/books/456

//get 请求可以省略不写 默认的是GET

method: 'get'

}).then(function(data) {

//它返回一个Promise实例对象,用于获取后台返回的数据

return data.text();

}).then(function(data) {

//在这个then里面我们能拿到最终的数据

console.log(data)

});

//POST请求传参

fetch('http://localhost:3000/books', {

method: 'post',

body: JSON.stringify({

uname: '张三',

pwd: '456'

}),

headers: {

'Content-Type': 'application/json'

}

}).then(function(data) {

//return data.json(); 将获取到的数据使用 json 转换成对象

return data.text(); //将获取到的数据 转换成字符串

}).then(function(data) {

console.log(data)

});

axios( axios.get() 返回的是一个Promise对象 )

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基于 promise,用于浏览器和node.js的http客户端。

1. 能拦截请求和响应。

2. 自动转换JSON数据。

3. 能转换请求和响应数据。

axios基础用法:

get 和 delete请求传递参数:

1. 通过传统的url 以 ? 的形式传递参数

2. restful 形式传递参数

3. 通过 params 形式传递参数

post 和 put 请求传递参数:

1. 通过选项传递参数

2. 通过 URLSearchParams 传递参数

//发送GET请求

axios.get('http://localhost:3000/data')

.then(function(ret){

//拿到 ret 是一个对象,所有的对象都存在 ret 的 data 属性里面。

//注意data属性是固定的用法,用于获取后台的实际数据

console.log(ret.data)

})

//请求传递参数

1. 通过传统的url 以 ? 的形式传递参数

axios.get('http://localhost:3000/axios?id=123')

2. restful 形式传递参数

axios.get('http://localhost:3000/axios/123')

3. 通过 params 形式传递参数

axios.get('http://localhost:3000/axios', {

params: {

id: 789

}

})

4. 通过 URLSearchParams 传递参数

var params = new URLSearchParams();

params.append('uname', 'zhangsan');

params.append('pwd', '111');

axios.post('http://localhost:3000/axios', params)

5. 通过选项

axios.post('http://localhost:3000/axios', {

uname: 'lisi',

pwd: 123

})

axios 全局配置

# 配置公共的请求头

axios.defaults.baseURL = 'https://api.example.com';

# 配置超时时间

axios.defaults.timeout = 2500;

# 配置公共的请求头

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

# 配置公共的 post 的 Content-Type

axios.defaults.headers.post['Content-Type'] = 'application/json';

axios 拦截器

请求拦截器:

请求拦截器的作用是在请求发送前进行一些操作。

例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。

响应拦截器:

响应拦截器的作用是在接收到响应后进行一些操作。

例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。

# 1. 请求拦截器

axios.interceptors.request.use(function(config) {

//任何请求都会经过这一步,在发送请求之前做些什么

config.headers.token = 'nihao';

//这里一定要return,否则配置不成功

return config;

}, function(err){

//对请求错误做点什么

console.log(err)

});

# 2. 响应拦截器

axios.interceptors.response.use(function(res) {

//在接收响应做些什么

var data = res.data;

return data;

}, function(err){

//对响应错误做点什么

console.log(err)

});

async 和 await(让异步代码看起来、表现起来更像同步代码)

async 作为一个关键字放到函数前面,任何一个 async 函数都会隐式返回一个 promise。

await 关键字只能在使用 async 定义的函数中使用,await后面可以直接跟一个 Promise实例对象(不能单独使用)。

async 基础用法

//async作为一个关键字放到函数前面

async function queryData() {

//await关键字只能在使用async定义的函数中使用,await后面可以直接跟一个Promise实例对象。

var ret = await new Promise(function(resolve, reject){

setTimeout(function(){resolve('nihao')},1000);

});

return ret;

}

//任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程

queryData().then(function(data){console.log(data)});

//async 函数处理多个异步函数

async function queryData() {

//添加await之后 当前的await返回结果之后才会执行后面的代码。

var info = await axios.get('async1');

//让异步代码看起来、表现起来更像同步代码

var ret = await axios.get('async2?info=' + info.data);

return ret.data;

}

queryData().then(function(data){console.log(data)});

以上是 Vue.js(五) 的全部内容, 来源链接: utcz.com/z/379134.html

回到顶部