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)
    })
  })
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值