【Vue.js】 Vue axios 二次封装

为什么要封装

axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。

不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。 

这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用。

src/request/index.ts

import axios from 'axios'
import type { AxiosRequestConfig } from "axios";
const request = axios.create({
  baseURL: "http://192.168.1.245:3001/",  // 配置请求基地址
  timeout: 5000,                          // 请求 50s 超时
});

// 请求拦截器
request.interceptors.request.use((config: AxiosRequestConfig) => {
  let token = window.localStorage.getItem("token");
  if (token) {
    config.headers!["authorization"] = token;
    return config;
  }
  return config
});

// 响应拦截器
request.interceptors.response.use(config => {
  return config.data;
});

export default request;

小结

在实际开发中，当我们的代码重复复用两次以上，就一定涉及到代码的封装。

封装是编程中很有意义的手段，简单的axios封装，就可以让我们可以领略到它的魅力。

封装 axios 没有一个绝对的标准，只要你的封装可以满足你的项目需求，并且用起来方便，那就是一个好的封装方案。