在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ axios 如何解決重復(fù)提交

axios 如何解決重復(fù)提交

項目使用了Axios,如何避免服務(wù)器卡頓時后用戶可能重復(fù)提交表單的問題.
看axios文檔提供了CancelToken來取消請求的方法,但是不知道如何使用,
求大神指點一下

回答
編輯回答
病癮

https://www.npmjs.com/package... 借鑒別人的以及axios文檔,一個簡單的方法

2017年9月23日 17:04
編輯回答
青裙

goHold(subData) {

        this.$refs[subData].validate((valid) => {
            if (valid) {
                if (this.isOk) {
                    this.isOk = false;
                    this.$api.apiCommunication('xxx', this.subData, res => {
                        if (res.code != 2000) {
                            this.isOk = true;
                            this.$alert(`創(chuàng)建失敗,服務(wù)器返回信息:${res.msg}`, '系統(tǒng)通知', { confirmButtonText: '確定', type: 'error' })
                            return false;
                        }
                        this.$notify({ title: '系統(tǒng)通知', message: '新建成功!', type: 'success' });
                        this.$router.go(-1);
                    })
                } else {
                    this.$alert('請勿重復(fù)提交 ; 等待返回信息', '系統(tǒng)通知', { confirmButtonText: '確定', type: 'error' })
                }
            } else {
                return false;
            }
        });
    },

我是用變量控制的

2018年3月27日 20:58
編輯回答
六扇門

引自https://www.kancloud.cn/yunye...最后面取消部分

使用 cancel token 取消請求
Axios 的 cancel token API 基于cancelable promises proposal,它還處于第一階段。
可以使用 CancelToken.source 工廠方法創(chuàng)建 cancel token,像這樣:

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 處理錯誤
  }
});

// 取消請求(message 參數(shù)是可選的)
source.cancel('Operation canceled by the user.');

還可以通過傳遞一個 executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)來創(chuàng)建 cancel token:

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函數(shù)接收一個 cancel 函數(shù)作為參數(shù)
    cancel = c;
  })
});

// 取消請求
cancel();
2018年8月30日 03:38
編輯回答
帥到炸

我沒用 axios自帶xxx ,直接在攔截器里面 用這個方法吧 模擬session 做一個 請求有效性數(shù)組

具體實現(xiàn)如:`// 設(shè)置緩存時間 和緩存請求數(shù)組
var requestUrl = [], saveTime = 1000;
http 攔截器中處理:
const Interceptor = function (obj,callback) {

if (obj.method === 'POST') {
    // 篩選在緩存時間內(nèi)未過期請求 重新賦值緩存請求數(shù)組 新數(shù)組與當(dāng)前請求url 匹配
    // 如果有相等項 則判斷為重復(fù)提交的請求 直接return
    let nowTime = new Date().getTime();
    requestUrl = requestUrl.filter((item) => {
        return (item.setTime + saveTime) > nowTime;
    });
    let sessionUrl = requestUrl.filter((item) => {
        return item.url === obj.url;
    });
    if (sessionUrl.length > 0) {
        // console.log(obj.url + '請求重復(fù) 中斷請求!');
        return;
    }
    let item = { url: obj.url, setTime: new Date().getTime() };
    requestUrl.push(item);
}
callback(obj);

};`

https://www.zhihu.com/questio...

2018年1月8日 05:32
編輯回答
安于心

用個 布爾變量(例如:canPost) 就可以了啊,判斷用戶提交后,沒成功之前將canPost置為 false ,每次請求的時候都會判斷這個變量,如果變量為 false 直接return就好了

2017年12月15日 19:43
編輯回答
失心人

這個問題也困擾我很久。原生的倒是有abort()實現(xiàn)。。網(wǎng)上關(guān)于axios庫取消上次請求的例子太少。官方文檔說得也太簡潔。本屌水平太爛、看了一天也沒個頭緒。后面這試下那試下。倒是出來了。。希望對樓主有幫助。

我的是VUE項目。。依據(jù)官方。。。還可以通過傳遞一個 executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)來創(chuàng)建 cancel token。。。。
export default {

data(){return {cancelTokenFn: null}},
methods: {
    cancelTokenDone () {
    
        const _this = this
        const CancelToken = axios.CancelToken
        
        this.cancelTokenFn && this.cancelTokenFn()
        this.cancelTokenFn = null
        
        axios.get('url', {cancelToken: new CancelToken(function executor(c) {
                                          _this.cancelTokenFn = c
                                       })})
         .then(function (response) {
             const data = response.data
             console.log(data)
         })
         .catch(function (error) {
             console.log(error)
         })      
    }
}

}

2017年7月9日 03:23
編輯回答
尋仙

額,對于你遇到的問題

如何避免服務(wù)器卡頓時后用戶可能重復(fù)提交表單的問題.

也許你想要的答案是 - 如何不發(fā)重復(fù)的請求。

那么,如何不發(fā)重復(fù)的請求呢?

最簡單的辦法是,如果請求沒有返回(失敗或者成功),禁止再提交。在前端,可以disable提交按鈕,或者disable提交函數(shù), 具體可以參考各種手機驗證碼發(fā)送按鈕的設(shè)計。從根本上解決用戶重復(fù)提交。

這個辦法還有一個必須要注意的是,如果服務(wù)器返回時間太長,用戶等待可能會比較久,體驗會很差。所以,前端必須要設(shè)置timeout。

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

不管服務(wù)器是否卡頓,超過1秒鐘,axios自動結(jié)束。用戶又可以再點擊提交了。當(dāng)然,記得在發(fā)現(xiàn)timeout之后調(diào)用cancel。

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

以上,就是解決這個問題前端要做的事情。

2018年5月2日 00:30