axios封装以及配置拦截器

1.配置安装axios

npm i axios

2.新建一个model文件夹，在文件夹里新建axios.ts的文件，并引用axios

import axios from "axios"

// 创建实例
let axios= axios.create({
    baseURL: 'xxxxxxxxxx',
    timeout: 15000  // 毫秒
})

3.baseURL设置区分不同环境配置不同路径，完整代码如下

import axios from "axios"

let baseURL;
if(process.env.NODE_ENV === 'development') {
    baseURL = 'xxx本地环境xxx';
} else if(process.env.NODE_ENV === 'production') {
    baseURL = 'xxx生产环境xxx';
}
 
// 实例
let axios= axios.create({
    baseURL: baseURL,
    timeout: 15000  // 毫秒
})

4.配置请求拦截器用于发送请求时统一发送的数据（一般用于请求头携带参数）

//请求拦截器
axios.interceptors.request.use((config: any) => {
  // 在发送请求前要做的事儿
    ...
  return config;
}, (err) => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
  return Promise.reject(err);
});

export default axios;

5.配置响应拦截器用于接收后台数据后做的事

//响应拦截器
axios.interceptors.reponse.use((config: any) => {
    // 请求成功对响应数据做处理
    ...
    // 该返回的数据则是axios.then(res)中接收的数据
  return config;
}, (err) => {
   // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
  return Promise.reject(err);
});

export default axios;

6.请求拦截器实例案例

// 请求拦截器
axios.interceptors.request.use((config: any) => {
  if (sessionStorage.getItem('token')) {
    //统一配置请求头在每个请求前携带参数{Authorization：token}给后台
    config.headers.Authorization = sessionStorage.getItem('token');
  }
  return config;
}, (err) => {
  return Promise.reject(err);
});

export default axios;

7.响应拦截器实例案例

// 设置axios拦截器: 响应拦截器
axios.interceptors.response.use(res => {
  // 成功响应的拦截
  return Promise.resolve(res.data)
}, err =>{
  // 失败响应的拦截
  console.log(err)
  if(err.response){
    // 失败响应的status需要在response中获得
    console.log(err.response)
    switch(err.response.status){
      // 对得到的状态码的处理，具体的设置视自己的情况而定
      case 401:
          console.log('未登录')
          window.location.href='/'
          break
      case 404:
          window.location.href='/'
          break
      case 405:
          console.log('不支持的方法')
          break
      // case ...
      default:
          console.log('其他错误')
          break
    }
  }
  // 注意这里应该return promise.reject(),
  // 因为如果直接return err则在调用此实例时，响应失败了也会进入then(res=>{})而不是reject或catch方法
  return Promise.reject(err)
})

export default axios;

8.在model文件夹新建http.ts文件对axios请求进行封装

import axios from "./axios"

export const get = (url: any, params: any, headers?: any) => axios({ method: "get", url, params, headers });

export const post = (url: any, data: any, headers?: any) => axios({ method: "post", url, data, headers });

export const patch = (url: any, data: any, headers?: any) => axios({ method: "patch", url, data, headers })

export const del = (url: any, data?: any, headers?: any) => axios({ method: "delete", url, data, headers })

9.在model文件夹新建api.ts文件对接口数据进行统一管理

const info: any = {
  // 员工盘点模块接口
  staff: {
    // 导出选中
    exportAssetCheck: "/assetCheck/exportAssetCheck",
  },
  // 公共模块接口
  common: {
    ocridentify: "/assetCheck/assetOcrCheck",
  }
}
export default info;

10.在model文件夹新建staffModel.ts接口模块用于相关页面模块的请求调用

import api from "./api"
import { get,post } from "./http"

//导出选中
export const getdetail = (params: any) => get(api.staff.exportAssetCheck, params);

//post请求url携带params参数
export const searchList = (data: any) => post(api.staff.ocridentify + '?' + 'pageNum=' + data.pageNum + '&' + 'currentPage=' + data.currentPage, data);

11.在相关页面引入staffModel.ts文件调根据需求调用相关接口即可。