axios請求攔截器和響應攔截器


axios里面可以設置攔截器 ,在請求發送之前做一些事情;
攔截器分【請求攔截器】和【響應攔截器】
參考地址:https://www.jb51.net/article/150014.htm
參考的地址:https://www.jianshu.com/p/7bc7654d4574

請求攔截器的實際應用場景
在進行鑒權的時候;我們每個接口都需要攜帶token;
難道每次我們都需要手動拼接token;
這個時候攔截器就很有用了;
這時候就可以用攔截器來使token自動增加


// 首先我們看下請求攔截器的寫法;在請求或響應被 then 或 catch 處理前攔截它們。
axios.interceptors.request.use((config)=>{
	console.log("--",config);
	config.baseURL="https://193.121.12.121:8999/";
	
                if (token) {  // 判斷是否存在token,如果存在的話,則每個http header都加上token
                     config.headers.myAuthorization = mytoken;
	            // config.headers['Authorization'] = token;
                } 
	       if(!config.hasOwnProperty('showError')){
	            config.showError = true
               }
	return config;
},(err)=>{
    console.log(error)
     // 發生錯誤做的一些事情
      return Promise.reject(error);
})



// 添加響應攔截器
axios.interceptors.response.use(function (res) {
  // 對響應數據做點什么
   if (res&&res.data&&res.data.success) {
                return  res.data
   }else{
	if(res.config.showError) {
                  //如何請求失敗,開啟了錯誤提示;進行提示
                    window.$toast(res.data.msg)
                }
                return Promise.reject(res.data)
  }}, function (error) {
     // 對響應錯誤做點什么;沒有權限401,去登錄界面
     if(error.response.status === 401) {
            window.$toast('登錄超時')
            setTimeout(() => {
                uni.switchTab({  
                    url: '/pages/home/home'
                })
            },1000)
        }else if(error.response.status === 403) {
            window.$toast('暫無權限')
        }else {
            window.$toast('網絡錯誤')
        }

  return Promise.reject(error);
 });

export default axios

使用

import request from './common'
/** 
{請求參數} data   
@param {
showError: 是否隱藏錯誤提醒
 } utils 
*/


export function getUserInfo(data, utils) {
	return request({
		url: 'xxx/xx/user',
		method: 'get',
		data,
		...utils
	})
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM