axios二次封裝

 

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

src/require/http.js

/*
***url請求路徑
***method請求方式
***datas請求參數
***isJson,true||false（控制請求頭的content-type）
*/
export function request(url, method, datas = {}, isJson = true) {
  console.log(isJson, 'isJson')
  return new Promise((resolve, reject) => {
    let token = document.cookie.split('=')[1]
    let data = method.toLowerCase() === 'get' ? qs.stringify(datas) : JSON.stringify(datas)
    axios({
      url,
      method,
      [method.toLowerCase() === 'get' ? 'params' : 'data']: data,
      headers: {
        "Content-Type": isJson ? "application/json;charset=utf-8" : "application/x-www-form-urlencoded",
        'TowattToken': token
      }
    }).then(response => {
      resolve(response.data);
    }, err => {
      reject(err)
    })
  })
}

main.js

import {request} from "./request/http"
Vue.prototype.$request = request;

調用

 this.$request(findEchargeCompanyByCompanyName, "post", {
        companyName: this.companyName,
      }).then((res) => {
        if (res) {
          this.tableData = res.rows;
        }
      });