Tout d'abord, créez un objet d'instance
Accédez à différents liens d'arrière-plan et utilisez différents objets d'instance pour envoyer des demandes
// 创建实例对象
const requestA = axios.create({
baseURL: '', // 基础访问路径 http://localhost:3000
timeout: 10000, // 设置超时时间
})
// 创建实例对象
const requestB = axios.create({
baseURL: '', // 基础访问路径 http://b.com
timeout: 10000, // 设置超时时间
})
//使用 request与axios对象的功能 几乎一样
requestA.get('/post').then(res=>{
console.log(res)
})Deuxièmement, définissez l'intercepteur de requête
Pour le prétraitement de la demande, vous pouvez modifier les paramètres d'envoi de la demande. La séquence de déclenchement est premier entré, dernier sorti et écrire d'abord puis vérifier.
requestA.interceptors.request.use(
config=>{
return config
},
error=>{
return Promise.reject(error)
}
)La configuration peut être modifiée dans config=>{}, comme :
config.timeout=2000
config.params={a:100} -----> L'url de la requête devient : http://localhost:3000/post?a=100
Le jeton vérifié en arrière-plan est généralement ajouté à la configuration de la demande à ce moment.
Troisièmement, définissez l'intercepteur de réponse
Le prétraitement des résultats de la réponse en arrière-plan peut simplifier les données res dans axios().then(res=>{})
La séquence de déclenchement est premier entré, premier sorti , premier à écrire, premier à modifier.
requestA.interceptors.response.use(
response=>{
return response
},
error=>{
return Promise.reject(error)
}
)4. Demande d'annulation
Cliquez plusieurs fois sur le bouton de demande, si la demande précédente n'a pas été complétée, annulez la demande précédente et envoyez cette demande
// 定义全局变量
let cancel = null
//给按钮添加点击事件
btn.onclick = function(){
//检测上次请求是否完成
if(cancel !== null){
cancel() // 调用cancel函数，取消上一次请求
}
axios.get(
'http://localhost:3000/posts',
{ // 添加配置对象的属性
cancelToken: new axios.CancelToken(function(c){
// 将c的值赋值给cancel
cancel = c
})
}
).then(res => {
console.log(res)
// 请求完成，将cancel初始化
cancel = null
}