axios封裝

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