vue.js - 如何用vue-resource设置timeout回调？

问题描述

问 题

module.exports = {
    name: 'segmentfault',
    methods: {
        loadData: function(uuid) {
            this.$http.get('/mockjs/test', // url
                           {a: 1},  // params
                           {timeout:500}  // options
                           ).then(
                           // success callback
                           function(response) {
                               console.log("成功这里没问题")
                           },
                           // fail callback
                           function(response) {
                               console.log(response.status); //为0
                               console.log(response.statusText); //为空
                               console.log("黑人问号？");
                           }

需求：
我想实现超时后写一个回调

我的思路
如果能够知道statusText是timeout，然后我就修改data的某一个值x，然后再用watch监听x，然后来写timeout的回调。

我遇到的问题
statusText并没有显示timeout。。呵呵。。

请问大家有没有解决方法？或者其他方法？谢谢

解决方案

VueResource 其實還是有一些 bug ，有空再寫個 PR ...

研究了下源碼，可以透過一些方式實現你要的結果，首先是設置 timeout ，會觸發 timeout interceptor

這是原本的 timeout interceptor

export default function (request, next) {

    var timeout;
       
    // 有設置值就啟動一個定時器
    if (request.timeout) {
        timeout = setTimeout(() => {
            // 這裡有問題，作者寫了一個 request.abort() ， 這裡卻用 cancel() 囧
            // 所以在 timeout 觸發時就會出問題
            // 就算是 abort ，也只會 request 被取消掉，不會有任何返回
            // 就像你看到的 status statusText 都是空的
            request.cancel();
        }, request.timeout);
    }

    next((response) => {

        clearTimeout(timeout);

    });
}

在不修改源碼的前提下，我們要繞過原本的 timeout interceptor ，自己實現一個 timeout interceptor 的流程 ，所幸是作者提供了增加自定義 interceptor 的方法，下面是我的實現方式，有兩種，可以改成其他符合你需求的

timeout 照樣回傳 resposne

jsFiddle

timeout 中斷 Request ，不會有任何 response ，但會觸發設置的 onTimeout 事件

jsFiddle

这篇关于vue.js - 如何用vue-resource设置timeout回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！