【愚公系列】2022年05月 vue3系列 axios请求的封装（TS版）

axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
  // Both requests are now complete
}));

const ID_TOKEN_KEY = "id_token" as string;

/**
 * @description 从localStorage获取令牌
 */
export const getToken = (): string | null => {
  return window.localStorage.getItem(ID_TOKEN_KEY);
};

/**
 * @description 将令牌保存到本地存储
 * @param token: 令牌
 */
export const saveToken = (token: string): void => {
  window.localStorage.setItem(ID_TOKEN_KEY, token);
};

/**
 * @description 从本地存储中删除令牌
 */
export const destroyToken = (): void => {
  window.localStorage.removeItem(ID_TOKEN_KEY);
};

export default { getToken, saveToken, destroyToken };

import { App } from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import JwtService from "@/core/services/JwtService";
import { AxiosResponse, AxiosRequestConfig } from "axios";

/**
 * @description 通过Axios调用HTTP请求的服务
 */
class ApiService {
  /**
   * @description 共享vue实例的属性
   */
  public static vueInstance: App;

  /**
   * @description 初始化 vue axios
   */
  public static init(app: App<Element>) {
    //共享vue实例属性
    ApiService.vueInstance = app;
    //vue挂载axio
    ApiService.vueInstance.use(VueAxios, axios);
    //vue设置基础路径
    ApiService.vueInstance.axios.defaults.baseURL = "http://localhost";
  }

  /**
   * @description 设置默认HTTP请求标头
   */
  public static setHeader(): void {
    ApiService.vueInstance.axios.defaults.headers.common[
      "Authorization"
    ] = `Token ${JwtService.getToken()}`;
  }

  /**
   * @description 发送GET HTTP请求
   * @param resource: string 路径
   * @param params: AxiosRequestConfig 参数
   * @returns Promise 异步请求
   */
  public static query(
    resource: string,
    params: AxiosRequestConfig
  ): Promise<AxiosResponse> {
    return ApiService.vueInstance.axios.get(resource, params).catch(error => {
      throw new Error(`[KT] ApiService ${error}`);
    });
  }

  /**
   * @description 发送GET HTTP请求
   * @param resource: string 路径
   * @param slug: string resful 参数
   * @returns Promise 异步请求
   */
  public static get(
    resource: string,
    slug = "" as string
  ): Promise<AxiosResponse> {
    return ApiService.vueInstance.axios
      .get(`${resource}/${slug}`)
      .catch(error => {
        throw new Error(`[KT] ApiService ${error}`);
      });
  }

  /**
   * @description 发送POST HTTP请求
   * @param resource: string 路径
   * @param params: AxiosRequestConfig resful参数
   * @returns Promise 异步请求
   */
  public static post(
    resource: string,
    params: AxiosRequestConfig
  ): Promise<AxiosResponse> {
    return ApiService.vueInstance.axios.post(`${resource}`, params);
  }

  /**
   * @description 发送UPDATE HTTP请求
   * @param resource: string 路径
   * @param slug: string resful参数
   * @param params: AxiosRequestConfig 参数
   * @returns Promise
   */
  public static update(
    resource: string,
    slug: string,
    params: AxiosRequestConfig
  ): Promise<AxiosResponse> {
    return ApiService.vueInstance.axios.put(`${resource}/${slug}`, params);
  }

  /**
   * @description 发送PUT HTTP请求
   * @param resource: string 路径
   * @param params: AxiosRequestConfig 参数
   * @returns Promise
   */
  public static put(
    resource: string,
    params: AxiosRequestConfig
  ): Promise<AxiosResponse> {
    return ApiService.vueInstance.axios.put(`${resource}`, params);
  }

  /**
   * @description 发送DELETE HTTP请求
   * @param resource: string 路径
   * @returns Promise
   */
  public static delete(resource: string): Promise<AxiosResponse> {
    return ApiService.vueInstance.axios.delete(resource).catch(error => {
      throw new Error(`[RWV] ApiService ${error}`);
    });
  }
}

export default ApiService;

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';