【记录】关于axios使用须知

【记录】关于axios使用须知

这是一次血泪的教训,纠结了三个晚上,我觉得有必要把它记录下来,留作日后警醒。

问题描述:

     在调用定义了async/awite的方法后,总是未等到响应返回,就执行了接下来的代码

错误代码展示:

axios封装代码:

import axios from 'axios'
import qs from 'qs'

...

export default function ajax(url, data = {}, type = 'GET') {

  // 执行axios
  return new Promise(function (resolve, reject) {
    // 执行异步ajax请求
    let promise
    if (type === 'GET') {
      // 准备url query参数数据
      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请求
      promise = axios.post(url, qs.stringify(data))
    }
    promise.then(function (response) {
      // 成功了调用resolve()
      console.log(response.data)
      resolve(response.data)
    }).catch(function (error) {
      //失败了调用reject()
      reject(error)
    })
  })
}

定义axios接口:

import ajax from './../ajax'
const BASE_URL = '/api';


const reqQueryUserinfoPageByMap = (userinfo, pageNo, pageSize) => {
  const url = `${BASE_URL}/sys/userinfo/query`;
  ajax(url, {id:userinfo.id,userinfoAccount:userinfo.userinfoAccount, pageNo, pageSize}, 'POST')
}

export default {
  reqQueryUserinfoPageByMap
}

接口调用:

import api from '../../../api'
export default {
  async reqQueryUserinfoPageByMap({commit},{userinfo,pageNo,pageSize}){
    const result = await api.userinfoApi.reqQueryUserinfoPageByMap(userinfo,pageNo,pageSize)
    console.log("返回结果:" + result)
  }

}

前端调用结果:

可以看出前端调用接口后台响应是成功的,但是NM结果还未返回就开始处理结果了 说好的async/awite的了

于是在各种查资料,各种测试后,发现还是要多读书...那么最终原因到底是什么了?

原因:

    ES7 中有了更加标准的解决方案,新增了 async/await 两个关键词。async 可以声明一个异步函数,此函数需要返回一个 Promise 对象await可以等待一个 Promise 对象 resolve,并拿到结果。

好吧,就这一句话!!!心疼又木有!!!

那么到底错在哪里了?

分析:

既然返回必须是Promise 对象,那么接口究竟返回的是什么?

const reqQueryUserinfoPageByMap = (userinfo, pageNo, pageSize) => {
  const url = `${BASE_URL}/sys/userinfo/query`;
  ajax(url, {id:userinfo.id,userinfoAccount:userinfo.userinfoAccount, pageNo, pageSize}, 'POST')
}

---把箭头函数转成 ES5语法
const reqQueryUserinfoPageByMap = function(userinfo, pageNo, pageSize) {
  const url = `${BASE_URL}/sys/userinfo/query`;
  ajax(url, {id:userinfo.id,userinfoAccount:userinfo.userinfoAccount, pageNo, pageSize}, 'POST')
}

这究竟返回了什么?....不清楚的建议查看《学习ES6(一)-基础语法》箭头函数写法

更正:

const reqQueryUserinfoPageByMap = (userinfo, pageNo, pageSize) => {
  const url = `${BASE_URL}/sys/userinfo/query`;
  return ajax(url, {id:userinfo.id,userinfoAccount:userinfo.userinfoAccount, pageNo, pageSize}, 'POST')
}

const reqQueryUserinfoPageByMap  = (userinfo, pageNo, pageSize) => ajax(BASE_URL+'/sys/userinfo/query', {id:userinfo.id,userinfoAccount:userinfo.userinfoAccount, pageNo, pageSize}, 'POST')
  

验证:

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

丨Anna丨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值