1.store:
(1)state:
const state =
(2)mutation-types:
export const axios_push_token = 'axios_push_token' // 新增新的axios請求
export const axios_clear_token = 'axios_clear_token' // 清楚axios請求
(3)mutations:
import * as types from './mutation-types'
import from '@/utils/constant'
export default ,
[types.axios_clear_token]: () => )
axioscanceltokens =
}}
2.router:
import store from '@/store'
import * as types from '@/store/mutation-types'
// 導航守衛
router.beforeeach((to, from, next) => )
3.axios:
/**
* @file request.js axios配置
*/import axios from 'axios'
import from 'mint-ui'
import from '../utils/index'
import store from '@/store'
import * as types from '@/store/mutation-types'
import from '@/utils/constant'
// 建立axios例項
const service = axios.create()
axios.defaults.retry = 3
axios.defaults.retrydelay = 1000
// 新增請求***
service.interceptors.request.use((config) => )
})// ...
return config
}, (error) => )
service.interceptors.response.use(response => else if (!result.success) else
}, (error) => )
} else if (error.code === 'econnaborted' && error.message.includes('timeout')) )
} else if (error.response) )
} else ($)`)
}} else
} return promise.reject(error)
})export default service
4.constant:常量
/**
* 常量集合
*//**
* axios取消請求的描述
*/export const axios_request_cancel = '取消請求'
5.參考:
(1)axios npm:
(2)路由跳轉取消請求:
axios取消請求
let btns document.getelementsbytagname btn let cancel null btns 0 onclick function axios then response axios.get adata then ret query方式傳參和接收引數 傳參 this...
Axios取消請求ajax請求
使用者需要快速請求,比如搶購,前一次的請求資料是毫無意義的,直接取消就完事了 快速切換tab等操作選單後,如果前一次請求比後一次請求響應慢,資料就會對不上 index.js 如果前一次請求還未響應,先取消 this cancel this cancel message this axios main...
axios 主動取消請求
已經傳送的請求,在沒有收到後台返回之前主動取消。這樣的場景很常用。例如 乙個支付元件,正在支付的時候使用者立即又關閉了元件,這時應該立即取消支付請求。又或者tabs切換的時候,都是經常用到的。這裡我是用typescript來封裝的乙個簡單的axios請求做演示。api.js import axios...