typescript+vue cli3封装axios以及proxy代理跨域

我们都知道，typescript是javscript的超集，他可以支持javascript中所有的语法，并在javascript上添加了一些扩展，大大的提升了代码的可读性，而在vue 脚手架3中也提供了一套Vue的typescript的模板，解决了许多模块以及类型问题，那么如何用ts封装axios，下面奉上我自己的见解

---

首先在src目录下创建api和utils文件夹，然后在api下面创建main.ts文件，在utils下面创建request.ts文件

然后在request.ts中写如下代码

import axios from "axios";
// import store from '../store/index';
// import { getSessionId } from '@/utils/auth';

/* 防止重复提交，利用axios的cancelToken */
let pending: any[] = []; // 声明一个数组用于存储每个ajax请求的取消函数和ajax标识
const CancelToken: any = axios.CancelToken;

const removePending: any = (config: any, f: any) => {
  // 获取请求的url
  const flagUrl = config.url;
  // 判断该请求是否在请求队列中
  if (pending.indexOf(flagUrl) !== -1) {
    // 如果在请求中，并存在f,f即axios提供的取消函数
    if (f) {
      f("取消重复请求"); // 执行取消操作
    } else {
      pending.splice(pending.indexOf(flagUrl), 1); // 把这条记录从数组中移除
    }
  } else {
    // 如果不存在在请求队列中，加入队列
    if (f) {
      pending.push(flagUrl);
    }
  }
};

/* 创建axios实例 */
const service = axios.create({
  baseURL: "", //** 基础地址 要请求的url前缀  
  timeout: 5000 // 请求超时时间
});

/* request拦截器 */
service.interceptors.request.use(
  (config: any) => {
    // neverCancel 配置项，允许多个请求
    if (!config.neverCancel) {
      // 生成cancelToken
      config.cancelToken = new CancelToken((c: any) => {
        removePending(config, c);
      });
    }
    // 在这里可以统一修改请求头，例如 加入 用户 token 等操作
    //   if (store.getters.sessionId) {
    //     config.headers['X-SessionId'] = getSessionId(); // 让每个请求携带token--['X-Token']为自定义key
    //   }
    return config;
  },
  (error: any) => {
    Promise.reject(error);
  }
);


/* respone拦截器 */
service.interceptors.response.use(
  (response: any) => {
    // 移除队列中的该请求，注意这时候没有传第二个参数f
    removePending(response.config);
    // 获取返回数据，并处理。按自己业务需求修改。下面只是个demo
    if (response.status !== 200) {
      alert(1);
      if (response.status === 401) {
        if (location.hash === "#/") {
          return response;
        } else {
          location.href = "/#/";
        }
      }
      return Promise.reject("error");
    } else {
      return response;
    }
  },
  (error: any) => {
    // 异常处理
    console.log(error);
    pending = [];
    if (error.message === "取消重复请求") {
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

export default service;

然后在main.ts中引入request.ts使用该接口

import request from '../utils/request';

class Product {
    login(params: any) {
        return request({
            url: '/api/user/login.do', //请求的路由
            method: 'post', //请求的方法，默认为get
            data: params //发送请求所需的参数
        })
    }
}
export default Product;

最后在要用的组件中调用即可

import Product from "../api/main";
const _product = new Product();

 let params = new URLSearchParams();
    params.append('username', this.name);
    params.append('password', this.password);
    _product.login(params).then((res: any) => {
        console.log(res);
        if (res.data.msg === "登录成功") {
            this.$router.push("/")
          };
      })
  }

如果是需要跨域的情况下，在根目录中创建vue.configvue…js,然后request.ts中的baseURL直接写/api,main.ts中url直接写就可以了，不用再加前缀/api

module.exports = {
    // 修改的配置
    // 将baseUrl: '/api',改为baseUrl: '/',
    // baseUrl: '/',
    devServer: {
        proxy: {
            '/api': {
                target: '写路由',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }
}