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

---

前言

1.axios介绍

Axios，是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

功能特点:

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

支持多种请求方式:

• axios(config)
• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])
• axios.all([])：返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

合并请求示例：

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

axios官方文档：http://www.axios-js.com/zh-cn/docs/

2.vue-axios介绍

vue-axios可以直接把axios挂在到vue上防止全局污染

vue-axios官方文档：http://www.axios-js.com/zh-cn/docs/vue-axios.html

一、axios请求的封装（TS版）

1.JwtService

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 };

2.ApiService

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<AxiosResponse> 异步请求
   */
  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<AxiosResponse> 异步请求
   */
  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<AxiosResponse> 异步请求
   */
  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<AxiosResponse>
   */
  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<AxiosResponse>
   */
  public static put(
    resource: string,
    params: AxiosRequestConfig
  ): Promise<AxiosResponse> {
    
    
    return ApiService.vueInstance.axios.put(`${
      
      resource}`, params);
  }

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

export default ApiService;

3.使用

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)
})

4.axios配置详解

示例：

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';

4.1 url（必写）

请求地址

4.2 method

请求方法，默认是get

4.3 baseURL（常用）

baseURL会添加到url前（url是绝对地址除外）。

4.4 transformRequest

transformRequest选项允许我们在请求发送到服务器之前对请求的数据做出一些改动
该选项只适用于以下请求方式：put/post/patch

4.5 transformResponse

transformResponse选项允许我们在数据传送到then/catch方法之前对数据进行改动

4.6 headers（常用，如设置请求头json类型）

自定义请求头信息

4.7 params（常用，只有get请求设置params，其他请求需设置params,即只有get的请求参数位于url后，其他请求参数都在请求体中）

params选项是要随请求一起发送的请求参数----一般链接在URL后面

4.8 data（常用）

data选项是作为一个请求体而需要被发送的数据，该选项只适用于方法：put/post/patch
在浏览器上data只能是FormData, File, Blob格式

4.9 timeout（常用）

超时时间

4.10 withCredentials

withCredentails选项表明了是否是跨域请求、默认是default

4.11 onUploadProgress

onUploadProgress上传进度事件

4.12 onDownloadProgress

下载进度的事件

4.13 maxContentLength

相应内容的最大值