axios.js 源码分析

Posted 2021-01-31 daoket

axios.js 源码分析

axios.js --> Axios.js --> InterceptorManager.js --> dispatchRequest.js --> transformData.js --> adapters

1. axios 为什么可以在浏览器和服务器上同时运行？
   答：因为axios使用了适配器模式，在node中引入http模块请求，在浏览器中使用xhr对象进行请求

2. axios 如何实现请求和相应的修改
   答：通过一个拦截器(InterceptorManager)实现，拦截器其实就是一个观察者模式，通过use添加，通过eject删除，通过forEach进行notify

3. 拦截器和转换器的区别？
   答：拦截器主要是用来对请求和响应的数据进行一些处理，转化器则是将请求和响应的数据进行一些转换，比如转换请求参数，JSON相应数据等

4. axios常用配置

import axios from ‘axios‘

// 设置通用header
axios.defaults.headers.common[‘X-Requested-With‘] = ‘XMLHttpRequest‘; // xhr标识

// 设置某种请求的header
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=utf-8‘;

// 设置某次请求的header
axios.get(url, {
  headers: {
    ‘Authorization‘: ‘whr1‘,
  },
})

//跨域携带cookie
axios.defaults.withCredentials = true;

// 设置超时
axios.defaults.timeout = 3000;

// 超时处理
axios().catch(error => {
  const { message } = error;
  if (message.indexOf(‘timeout‘) > -1){
    // 超时处理
  }
})