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;
        }
      });