axios 路由跳轉取消請求

2021-09-24 10:40:10 字數 1785 閱讀 4309

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...