axios如何中断请求,axios同步处理
一、什么是axios？
axios是基于承诺的方法，可以发送get、post等请求，前端和后端都可以使用。【推荐：Ajax视频教程，web前端】
二、axios的内部原理
axios库公开了一个axios实例，其中安装了一个Axios方法。Axios方法有一个interceptorss对象，它有一个请求对象和一个响应对象，请求对象和响应对象都有一个use方法。所以我们可以调用axios.interceptors.request.use()和axios . interceptors . response . use()。
拦截器对象中的请求对象和响应对象实际上是用于管理拦截器的数组(处理程序)。当我们调用axios.interceptors.request.use()时，我们将在请求的拦截器数组(处理程序)中推送一个成功的回调和一个失败的回调。每次用的时候推一次，像[res1，rej1，res2，rej2…]
接下来是一个链，它是一个存储所有回调的数组。因为用于Promise，所以需要使用两个值，初始值是dispatchRequest和undefiend。然后，答应我。解决(配置)。然后(fn1，fn2)。当满足config中的结果时，config中的配置被发送到fn1并执行。如果拒绝，将错误结果传递给fn2并执行。也就是promise.resolve (config)。然后(chain [0]，chain [1])。Chain[0]是成功的回调，chain[1]是失败的回调。Config包含很多配置项，可能是一个字符串值或者方法等。
下一步是整理所有的承诺，将请求数组中未移位的回调函数推到链数组的前面，将响应数组中的回调函数推到链数组的后面。最后的链数组类似于[res2，rej2，res1，rej1，dispatch request，undefend，res3，rej3，res4，rej4]。
DispatchRequest用于执行axios.request在dispatchRequest方法中有一个适配器，它会根据不同的环境调用不同的对象。如果是在浏览器环境中，调用XMLHttpRequest对象。如果是在nodejs环境下，调用http对象。所以前端和后端都可以用。适配器将解析和封装请求的数据，封装的对象就是我们可以看到的响应response对象。
在处理dispatchRequest之后，将执行interceptors.response的回调函数。这就是为什么我们可以看到执行顺序是，后者的interceptors.requets比前者的interceptors . requets先执行，然后执行axios.request，最后执行interceptors.response。
接下来，执行我们的业务逻辑。
三、axios的使用
1、通过使用axios的方法
常见方法：get、post、request
axios.get
axios.get(/user ，{
参数：{
ID: 12345
}
})。然后(函数(响应){
console.log(响应)；
})。catch(函数(错误){
console.log(错误)；
})。then(function () {
//始终执行
});axios.post
axios.post(/user ，{
名字：“弗雷德”，
姓氏：“燧石族”
})。然后(函数(响应){
console.log(响应)；
})。catch(函数(错误){
console.log(错误)；
});axios.request
可以传入许多请求配置。
axios.request({
URL:“/用户”，
方法：“get”，//默认值
baseURL:“/API”，
//.})2、通过传入配置方法
axios({
方法：“get”，
url: http://bit.ly/2mTM3nY ，
responseType: stream})。然后(函数(响应){
response . data . pipe(fs . createwritestream( ada _ lovelace . jpg ))
});
四、响应模块
响应模块具有以下参数
{
数据：{}，
状态：200，
statusText:“好的”，
标题：{}，
配置：{}，
请求：{}}
五、配置
1.全局axios的配置
axios . defaults . base URL= https://API . example . com ；
axios . defaults . headers . common[ Authorization ]=AUTH _ TOKEN；
axios . defaults . headers . post[ Content-Type ]= application/x-www-form-urlencoded ；2.实例的配置
const instance=axios.create({
baseURL: https://API . example . com })；
instance . defaults . headers . common[ Authorization ]=AUTH _ TOKEN；3.配置的优先级
const instance=axios . create()；instance . defaults . time out=2500；instance.get(/longRequest ，{
超时：5000 });最终超时设置的时间是5000,所以这里面的优先级，请求里面的配置实例化配置爱可信的默认配置
六、Interceptors 拦截器
可以在请求数据之前或者接收数据之前处理数据
axios。截击机。请求。使用(功能(配置){
返回配置；
},函数（错误){
返回承诺。拒绝(错误);
});
axios。截击机。回应。使用(函数(响应){
返回响应；
},函数（错误){
返回承诺。拒绝(错误);
});
七、并发请求处理
//把爱可信请求放进函数里函数getUserAccount() {
返回axios。get(/user/12345 )；}
函数getUserPermissions() {
返回axios。get(/user/12345/permissions )；}//函数执行放到承诺里面排队，挨个响应Promise.all([getUserAccount()，getUserPermissions()])。然后（函数（结果){
const acct=results[0]；
常量perm=结果[1];
});参考文档：https://www。npmjs。com/package/axios以上就是深析爱可信异步请求的流程与原理的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。