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

最新推荐文章于 2023-04-14 21:12:33 发布

原创最新推荐文章于 2023-04-14 21:12:33 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax请求函数 #axios #promise

Javascript 专栏收录该内容

111 篇文章

订阅专栏

本文介绍如何在项目开发中使用Axios封装异步请求，通过Promise处理GET和POST请求，实现对response.data的获取。文章详细展示了如何创建一个可复用的ajax模块，用于简化HTTP请求流程。

在项目开发中，我们对于ajax请求会进行封装。我们通过axios拿到的是response数据，而axios + promise拿到的是response.data的数据。我们请求最终所想要异步返回的数据也是response.data，返回值也是promise的对象。
我们需要先引入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)
    })
  })
}