5.1 axios简介
axios是基于Promise的HTTP请求客户端，可同时在浏览器和node.js中使用
功能特性
在浏览器中发送XMLHttpRequest请求
在node.js中发送http请求
支持Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击
那么，问题来了，什么是Promise?
5.2 Promise
在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：
function callback() {
console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 1000); // 1秒钟后调用callback函数
console.log('after setTimeout()');
观察上述代码执行，在Chrome的控制台输出可以看到：
before setTimeout()
after setTimeout()
(等待1秒后)
Done
可见，异步操作会在将来的某个时间点触发一个函数调用。AJAX就是典型的异步操作。
if (adyState ===4) {
if (request.status ===200) {
return sponseText);
} else {
return fail(request.status);
}
}
}
把回调函数sponseText)和fail(request.status)写到一个AJAX操作里很正常，但是不好看，而且不利于代码复用。
有没有更好的写法？比如写成这样：
var ajax =ajaxGet('...');
ajax.ifSuccess(success)
.ifFail(fail);
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
5.2.1 基本用法
ES6规定，Promise对象是一个构造函数，用来生成Promis实例：
const promise =new Promise(function(reslove,reject){
//... some code
if(//异步调取成功){
reslove(value);
}else{
reject(error);
}
});
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
5.2.2 简单应用
下面是一个用Promise对象实现的 Ajax 操作的例子：
const getJSON=function(url) {
const promise =new Promise(function(resolve, reject){
const handler=function() {
if (adyState !==4) {
return;
}
if (this.status ===200) {
sponse);
} else {
reject(new Error(this.statusText));
}
};
const client =new XMLHttpRequest();
client.open("GET", url);
client.setRequestHeader("Accept", "application/json");
client.send();
});
return promise;
};
getJSON("/posts.json").then(function(json) {
console.log('Contents: '+ json);
}, function(error) {
<('出错了', error);
});
上面代码中，getJSON是对 XMLHttpRequest 对象的封装，用于发出一个针对 JSON 数据的 HTTP 请求，并且返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数。
如果调用resolve函数和reject函数时带有参数，那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的值以外，还可能是另一个Promise 实例，比如像下面这样:
const p1 =new Promise(function (resolve, reject) {
// ...
});
const p2 =new Promise(function (resolve, reject) {
// ...
resolve(p1);
})
上面代码中，p1和p2都是 Promise 的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。
注意，这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。
5.3 Axios
5.3.1 在项目中使用
npm install axios --save
5.3.2 发送请求
执行GET请求
// 为给定 ID 的 user 创建请求
<('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可选地，上面的请求可以这样做
<('/user', {
ajax实例里面的函数params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.
catch(function (error) {
console.log(error);
});
执行POST请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.
catch(function (error) {
console.log(error);
});
执行多个并发请求
function getUserAccount() {
('/user/12345');
}
function getUserPermissions() {
('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成
}));
5.3.3 axios API
可以通过向 axios 传递相关配置来创建请求
axios(config)
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios(url[, config])
// 发送 GET 请求（默认的方法）
axios('/user/12345');
可以使用自定义配置新建一个 axios 实例
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论