持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天点击查看活动详情

使用的场景

场景一：就是用户登录平台首页之后，首页的相关接口正在请求数据，在接口没有请求完之前用户进入了别的页面，这个时候就会出现一个问题，就是首页相关的接口还在请求，新进来的页面也在请求，会浪费很多的资源，解决方法就是在进入一个页面之前，如果上一个页面还在请求数据，就把该请求停止。

场景二：文件切片上传时需要不断的进行接口请求，文件比较大时需要耗费一定的时间，假如想在中途取消文件上传，那么就需要终止正在进行的接口请求。

场景二：在最近的开发过程中遇到也是遇到了一个问题，就是在我们进入页面之后去调接口请求数据，一般都不是调用一个接口，而是多个接口，如果我们遇到了这些接口都报错，这样页面上都会弹出很多错误提示信息，非常的不美观，对用户也非常的不友好，这个时候就是当一个接口报错之后，其他的接口停止请求

解决方案

使用 cancel token 取消请求，cancel token写法有两种

第一种：可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

const CancelToken = axios.CancelToken; 
const source = CancelToken.source();  
axios.get('/user/12345', {   
cancelToken: source.token  //source.token是令牌标识，这种令牌标识的特点就是他是唯一的
}).catch(function(thrown) {   
if (axios.isCancel(thrown)) {     
console.log('Request canceled', thrown.message);   
} else {      // 处理错误   } });  


axios.post('/user/12345', {
    name: 'new name' 、
}, { 
    cancelToken: source.token 
})  

source.cancel('Operation canceled by the user.');
// 取消请求（message 参数是可选的）

第二种：可以函数式调用，直接new CancelToken，函数里面的C就是cancel

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

实际代码示例

这里我们简单模拟一下发送请求，和取消请求，因为代码相对简单，这里我们就没有真正的去写接口，而是写了一个json文件，通过axios访问json文件从而模拟我们在开发过程中真正的请求。

<template>
    <div>
        <el-button @click="getList" type="primary">发送请求</el-button>
        <el-button @click="cancel" type="danger">取消请求</el-button>
    </div>
</template>
<script>
import axios from 'axios'
// 首先第一步是提取CancelToken
const CancelToken = axios.CancelToken
// 第二步调用CancelToken上面的方法，source
const source=CancelToken.source()
export default {
    data() {
        return {
            
        }
    },
    methods: {
        // 发送请求
        getList(){
            // 在发送请求的时候要绑定一个属性cancelToken值为source.token
            axios.get('/index.json',{cancelToken:source.token}).then(res=>{
                console.log(res);
            }).catch(err=>{
                console.log(err);
            })
        },
        // 取消请求
        cancel(){
            // 取消请求就是调用source的方法source.cancel，这个方法里面写取消请求的原因
            source.cancel('不想请求了')
        }
    },
}
</script>

通过上面的代码我们也完成请求和取消请求的操作，当然这个代码是不完美的，我们在真正的开发过程中axios肯定是要进行封装的，在之后的文章里面也会进行封装的操作

axios小技巧（终止网络请求）

使用的场景

解决方案

实际代码示例