ajax请求函数如何通过axios和promise进行封装

不念不忘少年蓝@ 2023-07-02 15:29 6阅读 0赞

1.  在项目开发中，我们对于`ajax`请求会进行封装。我们通过`axios`拿到的是`response`数据，而`axios + promise`拿到的是`response.data`的数据。我们请求最终所想要异步返回的数据也是`response.data`，返回值也是`promise`的对象。
2.  我们需要先引入`axios`模块，然后通过 `export default`去对外暴露`ajax`模块，传递`url`、`data`和`type`这三个值，返回`new Promise`对象。执行异步的`ajax` 请求，如果判读请求类型为`get`，准备拼接的字符串，进行遍历，拼接到`url`中，发送`get`请求。如果判断请求类型为`post`，发送`post`请求。成功了调用 `resolve()`，失败了就调用`reject()`，代码如下所示：

import axios from 'axios'
    export default function ajax (url, data = { }, type = 'GET') { 
      return new Promise(function (resolve, reject) { 
        // 执行异步的 ajax 请求
        let promise
        // 判读请求类型为get
        if (type === 'GET') { 
        // 准备拼接的字符串，进行遍历，拼接到url中
          let dataStr = ''
          Object.keys(data).forEach(key => { 
            dataStr += key + '=' + data[key] + '&'
          })
          if (dataStr !== '') { 
            dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
            url = url + '?' + dataStr
          }
          // 发送get请求
          promise = axios.get(url)
        } else { 
        // 判断请求类型为post
        // 发送post请求
          promise = axios.post(url, data)
        }
        promise.then(function (response) { 
        // 成功了调用resolve()
          resolve(response.data)
        }).catch(function (error) { 
        // 失败了调用reject()
          reject(error)
        })
      })
    }