axios使用：https://juejin.cn/post/7034827130701611016

    手写axios核心代码：https://juejin.cn/post/6856706569263677447

    1. // 创建 axios 类
    2. class Axios {
    3.   constructor () {
    4.     // 拦截器
    5.     this.interceptors = {
    6.       request: new InterceptorsManage,
    7.       response: new InterceptorsManage
    8.     }
    9.   }
    11.   request(config) {
    12.     // 拦截器和请求组装队列
    13.     let chain = [ this.sendAjax.bind(this),  undefined ]  // 成对出现的，失败回调暂时不处理
    15.     // 请求拦截
    16.     this.interceptors.request.handlers.forEach(interceptor => {
    17.       chain.unshift(interceptor.fullfield, interceptor.rejected)
    18.     })
    20.     // 响应拦截
    21.     this.interceptors.response.handlers.forEach(interceptor => {
    22.       chain.push(interceptor.fullfield, interceptor.rejected)
    23.     })
    25.     // 执行队列，每次执行一对，并对promise赋最新的值
    26.     let promise = Promise.resolve(config)
    27.     while(chain.length > 0) {
    28.       promise = promise.then(chain.shift(), chain.shift())
    29.     }
    30.     return promise
    31.   }
    33.   // 封装ajax
    34.   sendAjax(config) {
    35.     return new Promise(resolve => {
    36.       const { url = '', method = 'get', data = {} } = config
    37.       // 发送 ajax 请求
    38.       const xhr = new XMLHttpRequest()
    39.       xhr.open(method, url, true)
    40.       xhr.onload = function () {
    41.         // resolve(xhr.response)
    42.         try {
    43.           // 将结果转为json对象
    44.           resolve(JSON.parse(xhr.response))
    45.         } catch (err) {
    46.           resolve(xhr.response)
    47.         }
    48.       }
    49.       xhr.send(data)
    50.     })
    51.   }
    52. }
    55. // 定义get,post...方法，挂在到Axios原型上
    56. const methodsArr = ['get', 'post', 'delete', 'put', 'patch', 'options', 'head']
    57. methodsArr.forEach(met => {
    58.   Axios.prototype[met] = function() {
    59.     // 处理单个方法
    60.     if(['get', 'delete', 'head', 'options'].includes(met)) {
    61.       // 2个参数(url[, config])
    62.       return this.request({
    63.         method: met,
    64.         url: arguments[0],
    65.         ...arguments[1] || {}
    66.       })
    67.     } else {
    68.       // 3个参数(url[,data[,config]])
    69.       return this.request({
    70.         method: met,
    71.         url: arguments[0],
    72.         data: arguments[1] || {},
    73.         ...arguments[2] || {}
    74.       })
    75.     }
    76.   }
    77. })
    79. // 拦截器
    80. class InterceptorsManage {
    81.   constructor () {
    82.     // 保存回调
    83.     this.handlers = []
    84.   }
    86.   use(fullfield, rejected) {
    87.     this.handlers.push({
    88.       fullfield,
    89.       rejected
    90.     })
    91.   }
    92. }
    94. // 工具方法，实现将b的方法混入a
    95. const utils = {
    96.   extend(a, b, context) {
    97.     for (let key in b) {
    98.       if (b.hasOwnProperty(key)) {
    99.         if (typeof b[key] === 'function') {
    100.           a[key] = b[key].bind(context)
    101.         } else {
    102.           a[key] = b[key]
    103.         }
    104.       }
    105.     }
    106.   }
    107. }
    109. // 最终导出axios的方法，即实例的request方法
    110. function CreateAxiosFn () {
    111.   let axios = new Axios()
    112.   let req = axios.request.bind(axios)
    114.   // 混入方法，将Axios.prototype上的方法搬运到request上
    115.   utils.extend(req, Axios.prototype, axios)
    116.   // 将axios上的拦截器挂载到request上
    117.   utils.extend(req, axios)
    119.   return req
    120. }
    122. // 得到最后的全局变量axios
    123. let axios = CreateAxiosFn()