1. axios特点（面试常问）

  1. 基本promise的异步ajax请求库
  2. 浏览器端/node端都可以使用
  3. 支持请求/响应拦截器
  4. 支持请求取消
  5. 请求/响应数据转换
  6. 批量发送多个请求
  7. 有效防御xsrf攻击

2. axios常用语法

axios(config):通过/最本质的发任意请求的方式
axios(url,config):可以只指定url发get请求
axios.request(config):等同于axios(config)
axios.get(url[,config):发get请求
axios.delete(url[,config):发getdelete请求
axios.post(url[,data,config):发post请求
axios.put(url[,data,config):发put请求

axios.defaults.xxx:请求的默认全局配置
axios.interceptors.request.use():添加请求拦截器
axios.interceptors.reponse.use():添加相应拦截器

axios.create([config]):创建一个新的axios（他没有下面的功能）

axios.Cancel():用于创建取消请求的错误对象
axios.CancelToken():用于创建取消请求的token
axios.isCancel():是否是一个取消请求的错误
axios.all(promise):用于批量执行多个异步请求
axios.spread():用来指定接受所有成功数据的回调函数的方法

3. 难点语法的理解和使用

3.1. axios.create(config)

  • 根据指定配置创建一-个新的axios,也就就每个新axios都有自己的配置
  • 新axios只是没有取消请求和批量发请求的方法,其它所有语法都是一致的
  • 问：为什么 要设计这个语法?
    (1) 需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样，如何处理
    (2)解决:创建2个新axios,每个都有自己特有的配置,分别应用到不同要求的接口请求中

4. 源码分析

4.1. axios与Axios的关系

  1. 从语法上来说；axios不是Axios的实例
  2. 从功能上来说：axios是Axios的实例,可以作为函数执行，可以作为对象执行
  3. axios是Axios.prototype.request函数bind()返回的
  4. axios作为对象由Axios原型对象上的所有方法，有Axios对象上的所有属性

4.2. instance与axios的区别

  1. 相同：
    • 都是一个能发送任意请求的函数：request(config)
    • 都有发特定请求的各种方法：get()/post()/put()/delete()
    • 都有默认配置和拦截器的功能：de***ts/interceptors
  2. 不同：
    • 默认匹配值可能不同
    • instace没有axios后面添加的一些方法：create()/CancelToken()/all()

4.3 axios的流程图

图片说明

4.4 axios的流程介绍(串联)

request(config)==>dispatchRequet(config)==>xhrAdaptor(config)

  1. promise链回调：config 
    //  (unshift)请求拦截器，先添加后执行
    =>(fulfilled2,rejected2)->(fulfilled1,rejected1)
    =>(dispatchRequest,undefined) 发请求
    // (push)响应拦截器
    =>(fulfilled11,rejected11)->(fulfilled22,rejected22)
    //  axios发请求回调处理(我们自己定义的then)
    =>(onResolved,onRejected)

  1. request(config)==串联

    将请求拦截器/dispatchRequest()/响应拦截器

    通过pormise链串联返回promise

  2. dispatchRequet(config)===转换请求，响应数据，调用xhr发请求

    转换请求数据=》调用xhrAdaptor(config)发请求=》

    请求响应后转换响应数据=》返回promise

  3. xhrAdaptor(config)===成功返回成功或失败promise

    创建XHR对象，根据config进行相应设置，发送特定请求，并接受响应数据，返回promise

4.5 axios的请求/响应数据转换器是什么?

  1. 请求转换器:对请求头和请求体数据进行特定处理的函数
   if (utils.isObject(data)) {   
   setContentTypelfUnset(headers,'application/json;charset=utf-8');

   return JSON.stringify(data);

   }
  2. 响应转换器:将响应体json字符串解析为js对象或数组的函数

response.data = JSON.parse(response.data)

4.6 response整体结构

{
    data,
    status,
    statusText,
    headers,
    config,
    request
}

4.7 error的整体结构

{
       message,
       request,
       response
}

4.8.如何取消未完成的请求?

  1. 当配置 了cancelToken 对象时

    (1) 创建一个用于将来取消请求的cancelPromise

    (2) 并定义了一个用于取消请求的cancel函数

    (3) 将cancel函数传递出来

  2. 调用cancel()取消请求.

    (1) 执行cacel函数,传入错误信息message

    (2) 内部会让cancelPromise变为成功，且成功的值为一个 Cancel对象

    (3) 在cancelPromise的成功回调中中断请求，并让发请求的proimse失败,失败的reason为Cacel对象