封装一个简易版的 Axios

1.Axios 是什么

Axios 是一个基于 promise 网络请求库， 作用于 node.js 和浏览器中。他是 isomorphic的（同一套代码可以运行在 浏览器 和 node.js 中）。 在服务端它使用原生 node.js   http模块，在客户端（浏览端）则使用 XMLHttpRequests。

2.特点

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应（配置请求头，请求拦截器和响应拦截器）
• 转换请求和响应数据
• 取消请求
• 自动转换成JSON数据
• 客户端支持防御 XSRF

 3.实现代码

（只支持get和post请求）

 function myAxios({ method, url, params, data }) {
      // 对result进行解构
      // let {method,url,params,data} = result

      // 因为ajax是异步操作，推荐使用promise完成
      // 需要把创建的promise对象返回出去，之后才能then
      return new Promise((resolve, reject) => {

        // 发送请求+处理响应
        // 原生方法：
        // 1、创建xhr对象
        // 2、xhr.open(请求方式,url地址)
        // 3、xhr.send(请求体数据)
        // 4、监听xhr的load事件
        // 5、把服务器响应的结果xhr.response是JSON字符串，把JSON字符串转换成对象
        // 6、把转换后的对象通过resolve给.then
        let xhr = new XMLHttpRequest()

        // 判断是否传入了params，如果传入了params，此时需要转换成字符串，然后拼接到url中去-----------------------
        if (params !== undefined) {
          // console.log('此时传递了params')
          // 把params对象转换成字符串
          let arr = []
          for (let key in params) {
            let str = `${key}=${params[key]}`
            arr.push(str)
          }
          url += '?' + arr.join('&')
        }

        xhr.open(method, url)

        // 需要判断是否是get类型的请求----------------------------
        // 1、如果是get请求，不用设置请求体
        // 2、如果不是get请求，并且设置了data，此时需要设置请求体类型+发送data数据
        if (method === 'get') {
          // 1、如果是get请求，不用设置请求体
          xhr.send()
        } else {
          // 2、如果不是get请求，并且设置了data，此时需要设置请求体类型+发送data数据
          if (data !== undefined) {
            // 设置请求体类型
            // 发送data数据——》转换成json
            xhr.setRequestHeader('Content-Type', 'application/json')
            xhr.send(JSON.stringify(data))
          }
        }


        xhr.addEventListener('load', function () {
          //  console.log(JSON.parse(xhr.response))
          // 把获取的数据传递给resolve
          resolve(JSON.parse(xhr.response))
        })

        // 监听请求失败事件，处理请求失败
        xhr.addEventListener('error', function () {
          //  console.log('网络有问题，请求失败！')
          // 获取失败的数据传递给reject
          reject('网络有问题，请求失败！')
        })
      })
    }