axios超時(shí)掛載點(diǎn)擊事件重新請(qǐng)求未進(jìn)入前臺(tái)then和catch，什么原因呢？

問題描述

vue項(xiàng)目針對(duì)axios請(qǐng)求超時(shí)攔截，掛載了一個(gè)div，點(diǎn)擊重新請(qǐng)求，是封裝了一個(gè)axios，
未超時(shí)可以正常顯示，超時(shí)點(diǎn)擊后network有響應(yīng)數(shù)據(jù)response，但是vue頁面上的請(qǐng)求收不到res

相關(guān)代碼

// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）
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/woply_404@2x.png"/></div><p class="load-p">網(wǎng)絡(luò)不給力</p><p class="load-p">點(diǎn)擊屏幕，重新加載</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){
         //超時(shí)處理
         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'})
          },
        }))
    },
}

結(jié)果

圖片描述

未進(jìn)入到這個(gè)then里面也沒有進(jìn)catch，沒有報(bào)錯(cuò)信息，到這里resolve(res)就跳出了
圖片描述

回答

編輯回答

敢試

問題出在這里

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

改為

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

你仔細(xì)看你那段代碼，跟resolve其實(shí)沒關(guān)系，關(guān)鍵還在這里
你判斷res.data是否是 string 但是你解析的是res，對(duì)一個(gè)對(duì)象解析是會(huì)報(bào)錯(cuò)的
然后這個(gè)報(bào)錯(cuò)不會(huì)被catch 直接導(dǎo)致你請(qǐng)求進(jìn)入reject

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

2017年8月27日 07:38

編輯回答

不討囍

問題解決了，get和post方法改成返回了一個(gè)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/woply_404@2x.png"/></div><p class="load-p">網(wǎng)絡(luò)不給力</p><p class="load-p">點(diǎn)擊屏幕，重新加載</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)})
    })
}

2017年11月11日 19:29