标签：axios 请求 err 取消 一次 发送 source vue

前言：

　　在项目中经常有一些场景会连续发送多个请求，而异步会导致最后得到展示的结果可能不是最后一次发送请求返回的结果，且对性能也有非常大的影响。

场景：

　　列表式切换商品，有时候上一次请求的结果非常慢，而我又点了另外一个商品，这时候第二次请求的接口比上一次快，那么就点击第二次的商品看到的信息却是上一次的商品信息，这样的用户体验极其不好；

解决方案：

　　在点击下一个商品的时候，将上一个商品请求的接口中断取消请求。

代码如下：

<script>
import axios from 'axios'


export default {
    data() {
        return {
            source: null,
            }
        },
    methods: {
         cancelRequest() {
            if (typeof this.source === 'function') {
                this.source()
            }
        },
        getProductPackageInfo() {
            const _this = this;
            this.cancelRequest(); 
            // 取消上一次请求
            axios({
                method: 'post',
                url: this.secondURL.getProductPackageInfo,
                data:  { name: '小白' },
                cancelToken: new axios.CancelToken((c) => {
                    _this.source = c
                }),
            })
            .then((res) => {
                //  返回数据进行操作
            }).catch((err) => {if (axios.isCancel(err)) {
                    console.log('Rquest canceled', err.message); 
                    //请求如果被取消，这里是返回取消的message
                } else {
                    console.log(err);
                }
            })
       },
</script>

标签：axios,请求,err,取消,一次,发送,source,vue
来源： https://www.cnblogs.com/renzm0318/p/12031234.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。