axios超时挂载点击事件重新请求 未进入前台then和catch，什么原因呢？

Question

问题描述

vue项目针对axios请求超时拦截，挂载了一个div，点击重新请求，是封装了一个axios，
未超时可以正常显示，超时点击后network有响应数据response，但是vue页面上的请求收不到res

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
main.js里面引入封装的axios

//拦截
import request from '../static/js/request1.js';
Vue.prototype.axios = request

request1.js

import Axios from 'axios'
import Qs from 'qs'
import Vue from 'vue'
Axios.defaults.timeout = 800

const request = (options) => new Promise((resolve, reject) => {
    const page404 = (config) => {
        document.getElementById('loadAgain').style.display='block';
     let c = Vue.extend({
     template:'<div id="loadAgain" @click="loadAgain"><div class="loadBox"><img src="static/img/[e-mail]"/></div><p class="load-p">网络不给力</p><p class="load-p">点击屏幕，重新加载</p></div>',
         methods: {
             loadAgain() {
                   request(config)
                document.getElementById('loadAgain').style.display='none';
             }
         }
     })
     
     new c().$mount('#loadAgain');
 }
 
 Axios.interceptors.response.use((response) => {
    document.getElementById('loadAgain').style.display='none';
    return response;
 }, (error) => {
     if(error.code=='ECONNABORTED'&& error.message.indexOf('timeout')!=-1){
         //超时处理
         let config = error.config;
             page404(config);
     }
     return Promise.reject(error);
 });

    Axios.request(options)
    .then((res) => {
      if (typeof res.data == 'string') {
        res = JSON.parse(res)
      }
      if (res.data.code == '0000') {
        resolve(res)
      } else {
        reject(res);
      }
    })
    .catch((err) => {
      reject(err);
    })
})


export default  {
    get(URL,options) {
        return request(Object.assign({}, options, { method: "get" ,url:URL}))
    },
    post(URL,params,options) {
        return request(Object.assign({}, options, { 
          method: "post",
          url:URL,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
          },
          data:params,
          paramsSerializer: function(params) {
            return Qs.stringify(params, {arrayFormat: 'brackets'})
          },
        }))
    },
}

结果

未进入到这个then里面也没有进catch，没有报错信息，到这里resolve(res)就跳出了

Answer 1

问题解决了，get和post方法改成返回了一个promise,page404里面也需要resolve

const page404 = (config) => {
        document.getElementById('loadAgain').style.display='block';
        let c = Vue.extend({
        template:'<div id="loadAgain" @click="loadAgain"><div class="loadBox"><img src="static/img/[e-mail]"/></div><p class="load-p">网络不给力</p><p class="load-p">点击屏幕，重新加载</p></div>',
             methods: {
                loadAgain() {
                       request(config).then((res) => {
                      if (typeof res == 'string') {
                        res = JSON.parse(res)
                      }
                      resolve(res);
                    })
                    .catch((err) => {
                    })
                    document.getElementById('loadAgain').style.display='none';
                 }
            }
        })
         new c().$mount('#loadAgain');
     }

export default {
    get: (URL,options) => new Promise((resolve, reject) => {
        return request(Object.assign({}, options, { method: "get" ,url:URL})).then(res => {resolve(res)})
    }),
    post: (URL,params,options) => new Promise((resolve, reject) => {
        return request(Object.assign({}, options, { 
          method: "post",
          url:URL,
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
          },
          data:params,
          paramsSerializer: function(params) {
            return Qs.stringify(params, {arrayFormat: 'brackets'})
          },
        })).then(res => {resolve(res)})
    })
}

Answer 2

问题出在这里

if (typeof res.data == 'string') {
        res = JSON.parse(res)
      }

改为

if (typeof res == 'string') {
        res = JSON.parse(res)
      }

你仔细看你那段代码，跟resolve其实没关系，关键还在这里
你判断res.data是否是 string 但是你解析的是res，对一个对象解析是会报错的
然后这个报错不会被catch 直接导致你请求进入reject

if (typeof res == 'string') {
    res = JSON.parse(res)
 }