vue3 / vue2 封装axios

1. 安装axios和qs

cnpm install axios --save
cnpm install qs

qs是一个url参数转化（parse和stringify）的js库

2. 封装请求

在src下创建一个axios文件夹 在axios文件夹下创建三个文件, api.ts http.ts request.ts

request.ts(vite.config.ts中如果配置了跨域的话记得改baseUrl)

// 封装axios配置
import axios, { AxiosRequestConfig, Method } from "axios"
import { ElMessage } from "element-plus"
import router from '../router'
import store from "../store"

// 封装请求失败的统一处理
const errorHandle = (status: number, other: string) => {
    switch (status) {
      case 302: ElMessage.error('接口重定向了！');
        break;
      case 400:
        ElMessage.error("发出的请求有错误，服务器没有进行新建或修改数据的操作==>" + status)
        break;                
      case 401:
        router.replace({
          path: '/login',
        });
        break;
        // 403 token过期
        // 清除token并跳转登录页
      case 403:
        ElMessage.error("登录过期,用户得到授权，但是访问是被禁止的==>" + status)
        // store.commit('token', null);
        setTimeout(() => {
          router.replace({
            path: '/login',
          });
        }, 1000);
        break;
      case 404:
        ElMessage.error("网络请求不存在==>" + status)
        break;
      case 406:
        ElMessage.error("请求的格式不可得==>" + status)
        break;
      case 408: ElMessage.error(" 请求超时！")
        break;
      case 410:
        ElMessage.error("请求的资源被永久删除，且不会再得到的==>" + status)
        break;
      case 422:
        ElMessage.error("当创建一个对象时，发生一个验证错误==>" + status)
        break;
      case 500:
        ElMessage.error("服务器发生错误，请检查服务器==>" + status)
        break;
      case 502:
        ElMessage.error("网关错误==>" + status)
        break;
      case 503:
        ElMessage.error("服务不可用，服务器暂时过载或维护==>" + status)
        break;
      case 504:
        ElMessage.error("网关超时==>" + status)
        break;
      default:
        ElMessage.error("其他错误错误==>" + status)
    }
}
// const token = String(window.localStorage.getItem('token'))
// 实例化请求配置
const instance = axios.create({
    headers: {
        "Content-Type": "application/json;charset=UTF-8",
        "Access-Control-Allow-Origin-Type": '*',
        // 'Authorization': token,
    },
    timeout: 1000 * 10,
    baseURL: '/api',
    withCredentials: false
})

/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */
instance.interceptors.request.use(
    config => {
      // 登录流程控制中，根据本地是否存在token判断用户的登录情况        
      // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token      
      // const token = store.state.token;
      // localStorage.setItem('token', token);
      return config;
    },
    error => {
      ElMessage.error(error.data.error.message);
      return Promise.reject(error.data.error.message);
    }
)

// 响应拦截器
instance.interceptors.response.use(function (config) {
  return config
  }, error => {
    const { response } = error;
    if (error && response) {
        errorHandle(response.status, response.data.message);
        return Promise.reject(error.response.data)
      // 请求失败
    } else {
      // 超时处理
      if (JSON.stringify(error).includes('timeout')) {
        ElMessage.error('服务器响应超时，请刷新当前页')
      }
      return Promise.reject(error.message)
    }
  }
)
export default instance

 http.ts

/*
 * @Author: your name
 * @Date: 2020-05-20 21:42:01
 * @LastEditTime: 2020-05-26 10:20:50
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \webapp\src\utils\http.js
 */
// 导入封装好的axios实例
import request from './request'
import qs from "qs"
var token = ''
const http = {
    /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
    get(url: string, params?: any) {
        token = sessionStorage.getItem("token")
        const config = {
            method: 'get',
            url: encodeURI(url),
            headers: {
                'Authorization': token
            },
            params: null
        }
        if (params) config.params = qs.stringify(params)
        return request(config)
    },
    post(url: string, params?: any) {
        token = sessionStorage.getItem("token")
        const config = {
            method: 'post',
            url: encodeURI(url),
            headers: {
                'Authorization': token
            },
            data: null
        }
        if (params) config.data = qs.stringify(params)
        return request(config)
    },
    put(url: string, params?: any) {
        token = sessionStorage.getItem("token")
        const config = {
            method: 'put',
            url: encodeURI(url),
            headers: {
                'Authorization': token
            },
            params: null
        }
        if (params) config.params = qs.stringify(params)
        return request(config)
    },
    delete(url: string, params?: any) {
        token = sessionStorage.getItem("token")
        const config = {
            method: 'delete',
            url: encodeURI(url),
            headers: {
                'Authorization': token
            },
            params: null
        }
        if (params) config.params = qs.stringify(params)
        return request(config)
    }
}
//导出
export default http

api.ts

// 所有接口数据
import http from './http'
export class api {
    public static user = {
        login_by_form: (url, params) => http.post(url, params),
    }
}

 3. 使用

import { api } from '@/axios/api'
api.user.login_by_form(url, obj).then((res:any) => {
  // console.log(res)
  // store.commit('login/setLoginToken', true)
  // router.push('/home')
})