深析axios异步请求的流程与原理

112 阅读 0 评论 74 点赞

我是靠谱客的博主爱笑玫瑰，最近开发中收集的这篇文章主要介绍深析axios异步请求的流程与原理，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、什么是axios？

axios是一个基于Promise的方法，可以发送get、post等请求，并且前后端都可以使用。【推荐：Ajax视频教程，web前端】

二、axios的内部原理

axios库对外暴露了一个axios实例，axios实例其中挂载了一个Axios方法，Axios方法有一个interceptors对象(拦截器)，interceptors对象有request对象和response对象，并且request对象和response对象都有use方法，所以，我们可以调用axios.interceptors.request.use()和axios.interceptors.response.use().
interceptors对象里面的request对象和response对象其实是一个用来管理拦截器的数组（handlers）。当我们调用axios.interceptors.request.use()，就会在request的拦截器数组（handlers）里面push一个成功回调和一个失败回调。每使用一次，就push一次，类似[res1,rej1,res2, rej2…]
接下来是一个chain，它是一个存储所有回调的数组，因为它是给Promise使用的，所以它需要使用两个值，初始值为dispatchRequest和undefiend。接着，Promise.resolve(config).then(fn1, fn2)。当config里面的结果为fulfilled(成功），就把config里的配置传给fn1并执行。如果为reject(报错)，就把错误结果传给fn2并执行.即Promise.resolve(config).then(chain[0], chain[1])。chain[0]为成功回调，chain[1]为失败回调。config里面有很多配置项，他们可能是一个string值或方法等。
接下来是整理所有的Promise,把request数组里的回调函数unshift到chain数组的最前面，把response数组里的回调函数push到chain数组的最后面。最终chain数组里面类似[res2, rej2,res1, rej1, dispatchRequest,undefiend,res3, rej3, res4, rej4]。
dispatchRequest是用来执行axios.request的，dispatchRequest方法里面有一个adapter,它会根据不同的环境调用不同的对象。如果是在浏览器环境下，调用XMLHttpRequest对象。如果是nodejs环境下，就调用http对象。这就是为什么它既能在前端使用，也能在后端使用的原因。adapter会对请求到的数据进行解析封装，封装后的对象就是我们能看到的response响应对象。
处理完dispatchRequest，就会执行interceptors.response的回调函数。这就是为什么我们看到的执行顺序是，后者的interceptors.request比前者的interceptors.requets先执行，接着执行axios.request,最后顺序执行interceptors.response.
接下来执行我们的业务逻辑。

三、axios的使用

1、通过使用axios的方法

常用方法：get, post, request

axios.get

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });
登录后复制

axios.post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
登录后复制

axios.request

可以传入很多请求配置

axios.request({
	url: '/user',
	method: 'get', // 默认
	baseURL: '/api',
	//...})
登录后复制

2、通过传入配置方法

axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });
登录后复制

四、响应模块

响应模块有以下几个参数

{
	data: {},
	status: 200,
	statusText: 'ok'，
	header: {},
	config: {},
	request: {}}
登录后复制

五、配置

1.全局axios的配置

axios.defaults.baseURL = '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.timeout = 2500;instance.get('/longRequest', {
  timeout: 5000});
登录后复制

最终timeout设置的时间是5000，所以这里面的优先级，请求里面的配置>实例化配置>axios的默认配置

六、Interceptors 拦截器

可以在请求数据之前或者接收数据之前处理数据

axios.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
  axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    return Promise.reject(error);
  });
登录后复制

七、并发请求处理

// 把axios请求放进函数里function getUserAccount() {
  return axios.get('/user/12345');}
 function getUserPermissions() {
  return axios.get('/user/12345/permissions');}//函数执行放到Promise里面排队，挨个响应。Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });
登录后复制

参考文档：https://www.npmjs.com/package/axios

以上就是深析axios异步请求的流程与原理的详细内容，更多请关注靠谱客其它相关文章！