C++多執行緒2
阿新 • • 發佈:2021-11-21
axios封裝
// 封裝axios // 1.匯入axios // 2.建立axios例項 // 3.設定基礎路徑 // 4.請求和響應攔截器 // 5.請求前給請求頭新增token // 6.響應後,如200,則簡化返回的資料 // 7.響應後,如401,則攜帶當前路由,跳轉到登入頁import axios from 'axios' import store from '@/store' import router from '@/router' // baseURL 超時時間配置 const instance = axios.create({ baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net' }) // 全域性注入token // 請求攔截器=》發請求前 instance.interceptors.request.use(config => { // 在請求頭統一新增token const { token } = store.state.user.profile if (token) { config.headers.Authorization = `Bearer ${token}` } return config }, e => Promise.reject(e)) // 處理返回資料 token失效跳回到登入頁 // 響應攔截器=》成功請求 instance.interceptors.response.use( (response)=> { // 請求200進入到這裡 // 把data資料返回給頁面 return response.data }, (error) => { // 200以外進入 // 處理401 if (error?.response.status === 401) { /** * 1. 獲取當前出現401的頁面路徑(目的:成功登陸之後,回到上次訪問的頁面) * 2. 跳回登入頁帶上401頁面的地址 */ const redirectUrl = router.currentRoute.value.fullPath router.replace(`/login?redirectUrl=${redirectUrl}`) } return Promise.reject(error) } )
二次封裝
好處:
api統一管理,不管介面有多少,所有的介面都可以非常清晰,容易維護.
通常我們的專案會越做越大,頁面也會越來越多,如果頁面非常的少,直接用axios也沒有什麼大的影響,那頁面元件多了起來,上百個介面呢,
***這個時候後端改了介面,多加了一個引數什麼的呢?那就只有找到那個頁面,進去修改.整個過程很繁瑣不易於專案的維護和迭代.
這個時候如果我們統一的區管理介面,需要修改某一個介面的時候直接在api裡修改對應的請求是不是很方便呢?因為我們用的最多的還是get post請求.我們就可以針對封裝.
* 二次封裝(不是必須的) * 基於:instance的axios新例項 */ /** * * @param {*} url:string 請求路徑 * @param {*} method:string 請求方法(get/post等) * @param {*} datas:object 請求的時候需要的引數 */ const request = (url, method, datas) => { // 返回Promise物件 return instance({ url, method, // 物件動態屬性名 [method.toLowerCase() === 'get' ? 'params' : 'data']: datas }) } export default request