关于axios 配置的原因 为什么then和catch 反过来了 then应该是回调成功的函数才对

Question

axios.js相关配置

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

// axios 配置
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://192.168.1.120:8080/arbmanager';

//POST传参序列化
axios.interceptors.request.use((config) => {
  if(config.method  === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
 console.log('错误参数')
  return Promise.reject(error);
});

//返回状态判断
axios.interceptors.response.use((res) =>{
  if(!res.data.success){
    // _.toast(res.data.msg);
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  console.log('错误')
  return Promise.reject(error);
});

export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}

export default {
  /**
   * 用户登录
   */
  Login(params) {
    return fetch('/logindo.htm', params)
  },

login.vue调用axios

loginBtn(){
            let data = {
              'loginName': this.email,
              'loginPwd': this.password
            }
            api.Login(data)
              .then(res => {
                 let newData= JSON.parse(pako.inflate(res.data, { to: 'string' 
                 }));
                 console.log(res)
                 console.log(newData)
                //这里then应该是回调成功之后的函数才对 上面的pako只是一个解密js的一个插件
              })
              .catch(error => {
              //但是现在是catch回调成功在做相应的操作了，比如说判断用户名正确与否这个应该是then里面做的事情才对
//                this.$router.push({path:'/home'})
//                let newData= JSON.parse(pako.inflate(error.data, { to: 'string' }));
//                console.log(newData)
              })

关于axios 配置的原因 为什么then和catch 反过来了 then应该是回调成功的函数才对

Answer 1

原因出在这里的if判断字段问题，后台加密之后这个地方的值有点不一样少了一层操作 ，对应好字段即可

//返回状态判断
axios.interceptors.response.use((res) =>{
  if(!res.data.success){
    // _.toast(res.data.msg);
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  console.log('错误')
  return Promise.reject(error);
});

Answer 2

恩，这个问题我也碰到了

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
  console.log(res) 
  //对响应数据做些事
  if(!res.data.success){
      // _.toast(res.data.msg);
    return Promise.reject('瓦特了！数据没有拿到...O(∩_∩)O~~');
  }
  return res;
}, (error) => {
  // _.toast("网络异常", 'fail');
  // console.log('err' + error)// for debug
  return Promise.reject(error);
});

控制台输出res的内容发现返回数据的格式如下：

发现数据格式里根本就没有res.data.success所以在判断!res.data.success一直为true,所以我更改为如下方式：

if(res.status != 200){
      // _.toast(res.data.msg);
    return Promise.reject('瓦特了！数据没有拿到...O(∩_∩)O~~');
  }

然后就可以了

Answer 3

老哥，解决了没，我的也是这样，怎么解决的