[TOC] #### Vue 中 Axios 防止多次請求 1. main.js 入口文件全局綁定axios ~~~ import Vue from 'vue' import './plugins/axios' import App from './App.vue' import router from './router' import Axios from 'axios'; Vue.prototype.$http = Axios Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') ~~~ ***** 2. 組件中使用 >[danger] 注意：需要先定義cancelRequest() 方法，然后再axios 請求前 先調用該方法 cancelRequest() 此方法用于終止請求 ~~~ methods: { // 1. 定義終止請求方法 cancelRequest() { if (typeof this.source === 'function') { this.source('終止請求!') } }, getData() { // 2. 先調用終止請求方法 this.cancelRequest() // 3. 注意 this 指向 let that = this; // 4. 請求服務器api this.$http.get(`/api/searchList?cityId=10&kw=${this.keywords}`, { cancelToken: new this.$http.CancelToken( function executor(c) { that.source = c } ) }) .then(res => { if (res.data.msg === 'ok') { this.list = res.data.data.movies.list } }).catch(err => { if (err) { if (this.$http.isCancel(err)) { // 終止多次請求 請求取消 返回取消后的信息 console.log('請求取消', err.message) } else { // 服務端數據異常 console.log('沒有搜索到數據哦') this.list = [] } } }) } } ~~~