【记录】关于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')
验证: