axios如何終止多次請求

一、需求分析

在項目中經常有一些場景會連續發送多個請求，而異步會導致最后得到的結果不是我們想要的，並且對性能也有非常大的影響。例如一個搜索框，每輸入一個字符都要發送一次請求，但輸入過快的時候其實前面的請求並沒有必要真的發送出去，這時候就需要在發送新請求的時候直接取消上一次請求。

二、需求實現

<script>
import axios from 'axios'
import qs from 'qs'

export default {
    methods: {
        request(keyword) {
            var that = this;
            var CancelToken = axios.CancelToken
            var source = CancelToken.source()
              
            // 取消上一次請求
            this.cancelRequest();
            
            axios.post(url, qs.stringify({kw:keyword}), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Accept': 'application/json'
                },
                cancelToken: new axios.CancelToken(function executor(c) {
                    that.source = c;
                })
            }).then((res) => {
                // 在這里處理得到的數據
                ...
            }).catch((err) => {
                if (axios.isCancel(err)) {
                    console.log('Rquest canceled', err.message); //請求如果被取消，這里是返回取消的message
                } else {
                    //handle error
                    console.log(err);
                }
            })
        },
        cancelRequest(){
            if(typeof this.source ==='function'){
                this.source('終止請求')
            }
        },
    }
}
</script>

　　注意：

　　catch時需要注意攔截判斷 ，由於終止也會走catch 所以需要處理

三、需求實現

通過這樣的操作方法，實現了axios終止多次請求，如圖所示：