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

  1. 在项目开发中,我们对于ajax请求会进行封装。我们通过axios拿到的是response数据,而axios + promise拿到的是response.data的数据。我们请求最终所想要异步返回的数据也是response.data,返回值也是promise的对象。

  2. 我们需要先引入axios模块,然后通过 export default去对外暴露ajax模块,传递urldatatype这三个值,返回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)
    })
  })
}

发布了146 篇原创文章 · 获赞 34 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_42614080/article/details/104120375