vuecli3构建项目全过程（四）封装axios

本篇文章主要是针对请求地址、请求头和拦截器做统一的封装处理。

系列文章链接

vuecli3构建项目全过程（一）初始化项目

vuecli3构建项目全过程（二）配置文件

vuecli3构建项目全过程（三）路由配置
 

目录

安装axios

请求拦截器

响应拦截器

---

安装axios

// 安装

npm install axios --S

// 导入

import axios from 'axios'

封装axios主要是将传统的axios请求分为两部分进行封装，如下：

// 在src目录下新建api目录，在该目录下新建两个文件：index.ts 和 request.ts

// request.ts
// 请求地址、请求头、超时时间
cons instance = axios.create({
    baseURL: 'url地址',
    timeout: 60000,
    headers: {
        Authorization: 'Basic '
    }
})


// index.ts
// 封装请求方法
export const request = (option: any) => {
  const { url, method, params, data, responseType } = option;
  return instance({
    url: url,
    method,
    params,
    data,
    responseType: responseType
  });
};
export default {
  get: <T = any>(option: any) => {
    return request({ method: 'get', ...option }) as unknown as T;
  },
  post: <T = any>(option: any) => {
    return request({ method: 'post', ...option }) as unknown as T;
  },
  delete: <T = any>(option: any) => {
    return request({ method: 'delete', ...option }) as unknown as T;
  },
  put: <T = any>(option: any) => {
    return request({ method: 'put', ...option }) as unknown as T;
  }
}

//loginApi.ts
import request from './api';
export const login = () => {
    return request.post({
        url: ''
    })
}

除了封装axios请求，还需要添加请求拦截器和响应拦截器。

请求拦截器

顾名思义，在向服务端发送请求的时候进行数据处理，常见的处理有：

• 设置token
• 设置请求头
• 存在多个后端服务时，根据需求设置不同的前端跨域请求

instance.interceptors.request.use(
  (config) => {
    // 通过设置请求的data判断使用哪一个api服务或者设置不同的请求类型
    if (config.data === 'datav') {
      config.baseURL = '/datav-map-api';
      config.responseType = 'json';
    } else if (config.data === 'blob') {
      config.responseType = 'blob';
    }

    // 修改登录后的token
    const userStore = useUserStore();
    const token = userStore.getUserInfo.access_token;
    token && (config.headers['Blade-Auth'] = 'Bearer ' + token);

    return config;
  },
  (error: AxiosError) => Promise.reject(error)
);

响应拦截器

在服务端接收到请求后，向前端返回请求的时候进行数据处理。常见的处理有：

• 设置不同的状态码的中文提示
• 设置统一的成功 / 警告 / 错误消息提示框

instance.interceptors.response.use(
  (response: AxiosResponse<any>) => {
    if (response.config.responseType === 'blob') {
      // 如果是文件流，直接过
      return response;
    } else if (response.status === 200) {
      return response.data;
    } else {
      ElMessage.error(response.data.message);
    }
  },
  (error: AxiosError) => {
    console.log(error);
    if (error.response && error.response.status) {
      const { status } = error.response;
      let message;
      switch (status) {
        case 400:
          message = '请求错误';
          break;
        case 401:
          message = '请求未授权';
          break;
        case 404:
          message = '请求地址出错';
          break;
        case 408:
          message = '请求超时';
          break;
        case 500:
          message = '服务器内部错误!';
          break;
        case 501:
          message = '服务未实现!';
          break;
        case 502:
          message = '网关错误!';
          break;
        case 503:
          message = '服务不可用!';
          break;
        case 504:
          message = '网关超时!';
          break;
        case 505:
          message = 'HTTP版本不受支持';
          break;
        default:
          message = '请求失败';
      }
      ElMessage.error(message);
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);