axios 报错 then is a function (请求多 慢 时报错)

Question

this.API.post()是我封装的请求。
这个问题偶尔出现，我很奇怪原因，出现这个问题后所有的请求都请求不了了，除非清缓存，重新登录就好了。

这种情况一般出现在某个响应比较慢的接口下，这个接口还没有成功的时候，F5刷新页面，然后别的请求都跪了。

求大神给指点一下。

封装：

// 引入axios
import AES from './AES'
import API_CONFIG from './config'
import BASE from '../assets/js/tools/base'
import store from '../store/store'
import axios from 'axios'
import { message } from 'ant-design-vue';
import crypto from 'crypto';
import router from '../router/index';

// 创建axios实例
const httpService = axios.create({
  withCredentials: false, // 允许携带cookie
  baseURL: API_CONFIG.API_URL,
  timeout: 60000000, // 请求超时时间
  // transformRequest: [
  //   // `transformRequest` 允许在向服务器发送前，修改请求数据
  //   // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  //   // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  //   data => {
  //     var fData = new FormData();
  //     for(let key in data){
  //       fData.append(key, data[key]);
  //     }
  //     return fData
  //   }
  // ],
  //修改请求头信息
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    // 'Content-Type': 'multipart/form-data'
    // 'Content-Type': 'application/json;charset=UTF-8'
  },
});
// httpService.defaults.withCredentials = true; // 表示跨域请求时是否需要使用凭证
// http request 拦截器
httpService.interceptors.request.use(
  config => {
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);
// respone拦截器
httpService.interceptors.response.use(
  response => {
    const {
      data
    } = response;
    if(data.code === 200){
    }
    else{
      let rqData = JSON.parse(response.config.data); // 请求数据
      console.error(BASE.getNowTime(), rqData.interfaceid+"："+data.message)
      message.warning(data.message);
      store.commit('loadingStore', false); // 全局的数据 加载中.... - 开关
    }
    return data; // 响应正确的数据
  }, error => {
    // 响应错误数据(错误情况分无token信息,错误码)
    const {
      response
    } = error;
    if (response) {
      switch (error.response.status) {
        case 400:
          error.message = '错误请求';
          break;
        case 401:
          error.message = '未授权，请重新登录';
          break;
        case 403:
          error.message = '拒绝访问';
          break;
        case 404:
          error.message = '请求错误,未找到该资源';
          break;
        case 405:
          error.message = '请求方法未允许';
          break;
        case 408:
          error.message = '请求超时';
          break;
        case 500:
          error.message = '服务器端出错';
          break;
        case 501:
          error.message = '网络未实现';
          break;
        case 502:
          error.message = '网络错误';
          break;
        case 503:
          error.message = '服务不可用';
          break;
        case 504:
          error.message = '网络超时';
          break;
        case 505:
          error.message = 'http版本不支持该请求';
          break;
        default:
          error.message = `未知错误${error.response.status}`;
      }
    } else {
      error.message = "请求超时";
    }
    store.commit('loadingStore', false); // 全局的数据 加载中.... - 开关
    console.error(BASE.getNowTime(), error.message)
    message.error(error.message + "，请稍候重试！");
  }
);


/*
 *  post请求
 * */
export function post(params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      method: 'post',
      data: params,
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
}


export default {
  post,
}

Answer 1

function post 里面httpService前面还是要加个return，还是一样的道理，你返回的是一个promise并不是实际执行请求的httpService

你这样子有点封装过度了，其实可以这么写

export function post(params = {}) {
  return  httpService({
      method: 'post',
      data: params,
    })
}