axios二次封装

首先创建一个文件夹 然后创建两个js文件 分别是 http.js  api.js

http.js用来做axios公共地址前缀和请求拦截响应拦截这种

// 引入axios
import axios from 'axios'

/** 公共请求前缀 */
const http = axios.create({
  baseURL: 'http://???/???/??',
})


/*请求拦截**/
http.interceptors.request.use(
  (config) => {
    /* 这里是携带本地的token字段 每次发起请求都携带token 你可以不写**/
    let token = window.sessionStorage.getItem('token') || ''
    config.headers.Authorization = token
    return config
  },
    /* 用来做错误的统一处理 **/
  (error) => {
    return Promise.reject(error)
  }
)


/*响应拦截**/
http.interceptors.response.use(
  (response) => {
    return response.data
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 导出这个http.js文件
export default http

然后在api.js文件中导入这个http.js文件

/* 导入 **/
import http from '../http'

/* 封装 **/

export async function 变量名() {
  return await http({
    url: '请求地址后缀',
    method: '请求方式',
  })
}


vue组件中使用封装好的api

import { 变量名 } from 'js文件的路径'

变量名().then(res => {
    ... 你需要进行的操作
})