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

验证：