• 猿创征文｜vue中使用Axios最佳实践

    温馨提示：一文搞懂前端网络请求之axios，全文8千字，估计耗时10-12分钟

    博主主页：KinHKin的博客_CSDN博客-vue,性能优化,类型转换领域博主

    提示：完整代码我已经压缩放在个人主页的资源里，供大家免费下载💗

    目录

    1.前言

    2.使用

    2.1安装

    2.2基本用例

    2.2.1 get请求

    2.2.2 post请求

    3.配置

    3.1语法

    3.2别名 

    4.Axios实例

    4.1语法

    4.2请求配置

    4.3响应的配置

    配置的优先级

    5.拦截器

    6.错误拦截

     7.取消请求

    8.完整封装 

    9.总结

    1.前言

    最近在写vue3的项目，需要重新搭建脚手架并且使用网络请求接口，对于js的网络请求接口的一般有几种常用的方式：

    1. fetch
    2. XMLHttpRequests
    3. ajax （原生）
    4. axios （开源）

    Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。Axios 使用简单,包尺寸小且提供了易于扩展的接口。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

    简单示例：

    import axios from "axios";
    axios.get('/users')
    .then(res => {
    console.log(res.data);
    });

    2.使用

    2.1安装

    npm install axios

    2.2基本用例

    在commonJs中使用axios时候：使用require()导入的时候获得ts的类型推断；使用以下方法：

    const axios = require('axios').default;

    // axios. 能够提供自动完成和参数类型推断功能

    2.2.1 get请求

    发送一个get请求

    1. import axios from "axios"; 
    2. axios
    3.     .get("/getData")
    4.     .then((res) => {
    5.       console.log(res);
    6.       list.value = res.data.list;
    7.     })
    8.     .catch(function (error) {
    9.       // 处理错误情况
    10.       console.log(error);
    11.     })
    12.     .then(function () {
    13.       // 总是会执行
    14.     });

    支持异步操作 async/await用法

    1. const list = ref<ListModel[]>([]);
    2. async function getUrl() {
    3.   const res = await axios.get("/getData", {
    4.     params: {
    5.       id: 1, //需要携带参数
    6.     },
    7.   });
    8.   list.value = res.data.list;
    9. }
    10. getUrl();

    2.2.2 post请求

    发送一个post请求

    1. function postUrl() {
    2.   axios
    3.     .post("/postData", {
    4.       name: "Fred",
    5.       age: 18,
    6.     })
    7.     .then(function (response) {
    8.       console.log(response.data.message);
    9.     })
    10.     .catch(function (error) {
    11.       console.log(error);
    12.     });
    13. }
    14. postUrl();

     发起多个并发请求

    1. // 发送多个并发请求
    2. function getUserInfo() {
    3.   return axios.get("/userInfo");
    4. }
    5. function getToken() {
    6.   return axios.get("/getToken");
    7. }
    8. //同步
    9. Promise.all([getUserInfo(), getToken()]).then((res) => {
    10.   console.log(res, "res");
    11. });
    12. //异步
    13. Promise.race([getUserInfo(), getToken()]).then((res) => {
    14.   console.log(res, "res1111");
    15. });

    3.配置

    3.1语法

    axios(config)

    // 发起一个post请求

    axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });

    默认请求方式：

    // 发起一个 GET 请求 (默认请求方式) axios('/user/12345');

    3.2别名 

    axios.request(config)

    4.Axios实例

    4.1语法

    axios.create([config])

    1. const instance = axios.create({
    2.   baseURL: 'https://some-domain.com/api/',
    3.   timeout: 1000,
    4.   headers: {'X-Custom-Header': 'foobar'}
    5. });

    4.2请求配置

    这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。

    1. {
    2.   // `url` 是用于请求的服务器 URL
    3.   url: '/user',
    4.  
    5.   // `method` 是创建请求时使用的方法
    6.   method: 'get', // 默认值
    7.  
    8.   // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    9.   // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    10.   baseURL: 'https://some-domain.com/api/',
    11.  
    12.   // `transformRequest` 允许在向服务器发送前，修改请求数据
    13.   // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    14.   // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream
    15.   // 你可以修改请求头。
    16.   transformRequest: [function (data, headers) {
    17.     // 对发送的 data 进行任意转换处理
    18.  
    19.     return data;
    20.   }],
    21.  
    22.   // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
    23.   transformResponse: [function (data) {
    24.     // 对接收的 data 进行任意转换处理
    25.  
    26.     return data;
    27.   }],
    28.  
    29.   // 自定义请求头
    30.   headers: {'X-Requested-With': 'XMLHttpRequest'},
    31.  
    32.   // `params` 是与请求一起发送的 URL 参数
    33.   // 必须是一个简单对象或 URLSearchParams 对象
    34.   params: {
    35.     ID: 12345
    36.   },
    37.  
    38.   // `data` 是作为请求体被发送的数据
    39.   // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
    40.   // 在没有设置 `transformRequest` 时，则必须是以下类型之一:
    41.   // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    42.   // - 浏览器专属: FormData, File, Blob
    43.   // - Node 专属: Stream, Buffer
    44.   data: {
    45.     firstName: 'Fred'
    46.   },
    47.   
    48.   // `timeout` 指定请求超时的毫秒数。
    49.   // 如果请求时间超过 `timeout` 的值，则请求会被中断
    50.   timeout: 1000, // 默认值是 `0` (永不超时)
    51.  
    52.   // `withCredentials` 表示跨域请求时是否需要使用凭证
    53.   withCredentials: false, // default
    54.  
    55.  
    56.   // `auth` HTTP Basic Auth
    57.   auth: {
    58.     username: 'janedoe',
    59.     password: 's00pers3cret'
    60.   },
    61.  
    62.   // `responseType` 表示浏览器将要响应的数据类型
    63.   // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
    64.   // 浏览器专属：'blob'
    65.   responseType: 'json', // 默认值
    66.  
    67.   // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
    68.   // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
    69.   // Note: Ignored for `responseType` of 'stream' or client-side requests
    70.   responseEncoding: 'utf8', // 默认值
    71.  
    72.   // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
    73.   xsrfCookieName: 'XSRF-TOKEN', // 默认值
    74.  
    75.   // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
    76.   xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
    77.  
    78.   // `onUploadProgress` 允许为上传处理进度事件
    79.   // 浏览器专属
    80.   onUploadProgress: function (progressEvent) {
    81.     // 处理原生进度事件
    82.   },
    83.  
    84.   // `onDownloadProgress` 允许为下载处理进度事件
    85.   // 浏览器专属
    86.   onDownloadProgress: function (progressEvent) {
    87.     // 处理原生进度事件
    88.   },
    89.  
    90.   // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
    91.   maxContentLength: 2000,
    92.  
    93.   // `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
    94.   maxBodyLength: 2000,
    95.  
    96.   // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
    97.   // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
    98.   // 则promise 将会 resolved，否则是 rejected。
    99.   validateStatus: function (status) {
    100.     return status >= 200 && status < 300; // 默认值
    101.   },
    102.  
    103.   // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
    104.   // 如果设置为0，则不会进行重定向
    105.   maxRedirects: 5, // 默认值
    106.  
    107.   // `proxy` 定义了代理服务器的主机名，端口和协议。
    108.   // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
    109.   // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
    110.   // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。
    111.   // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
    112.   // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
    113.   proxy: {
    114.     protocol: 'https',
    115.     host: '127.0.0.1',
    116.     port: 9000,
    117.     auth: {
    118.       username: 'mikeymike',
    119.       password: 'rapunz3l'
    120.     }
    121.   },
    122.  
    123.   // see https://axios-http.com/zh/docs/cancellation
    124.   cancelToken: new CancelToken(function (cancel) {
    125.   }),
    126.  
    127. }

    4.3响应的配置

    一个请求的响应包含以下信息

    1. {
    2.   // `data` 由服务器提供的响应
    3.   data: {},
    4.  
    5.   // `status` 来自服务器响应的 HTTP 状态码
    6.   status: 200,
    7.  
    8.   // `statusText` 来自服务器响应的 HTTP 状态信息
    9.   statusText: 'OK',
    10.  
    11.   // `headers` 是服务器响应头
    12.   // 所有的 header 名称都是小写，而且可以使用方括号语法访问
    13.   // 例如: `response.headers['content-type']`
    14.   headers: {},
    15.  
    16.   // `config` 是 `axios` 请求的配置信息
    17.   config: {},
    18.  
    19.   // `request` 是生成此响应的请求
    20.   // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
    21.   // 在浏览器中则是 XMLHttpRequest 实例
    22.   request: {}
    23. }

    配置的优先级

    配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。下面有一个例子。

    1. // 使用库提供的默认配置创建实例
    2. // 此时超时配置的默认值是 `0`
    3. const instance = axios.create();
    4.  
    5. // 重写库的超时默认值
    6. // 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
    7. instance.defaults.timeout = 2500;
    8.  
    9. // 重写此请求的超时时间，因为该请求需要很长时间
    10. instance.get('/longRequest', {
    11.   timeout: 5000
    12. });

    5.拦截器

    在请求或响应被 then 或 catch 处理前拦截它们。

    1. // 生成实例
    2. const instance = axios.create({
    3.   baseURL: "/",
    4.   timeout: 1000,
    5.   headers: { "Content-Type": "multipart/form-data;charset=utf-8" },
    6. });
    7. // 请求的拦截器
    8. instance.interceptors.request.use(
    9.   function (config) {
    10.     // 在发送请求之前做些什么
    11.     console.log(config, "config");
    12.     return config;
    13.   },
    14.   function (error) {
    15.     // 对请求错误做些什么
    16.     return Promise.reject(error);
    17.   }
    18. );
    19. // 返回的拦截器
    20. instance.interceptors.response.use(
    21.   function (res) {
    22.     // 2xx 范围内的状态码都会触发该函数。
    23.     // 对响应数据做点什么
    24.     console.log(res, "res");
    25.  
    26.     return res;
    27.   },
    28.   function (error) {
    29.     // 超出 2xx 范围的状态码都会触发该函数。
    30.     // 对响应错误做点什么
    31.     return Promise.reject(error);
    32.   }
    33. );

    6.错误拦截

    1. axios.get('/getData')
    2.   .catch(function (error) {
    3.     if (error.response) {
    4.       // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
    5.       console.log(error.response.data);
    6.       console.log(error.response.status);
    7.       console.log(error.response.headers);
    8.     } else if (error.request) {
    9.       // 请求已经成功发起，但没有收到响应
    10.       // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
    11.       // 而在node.js中是 http.ClientRequest 的实例
    12.       console.log(error.request);
    13.     } else {
    14.       // 发送请求时出了点问题
    15.       console.log('Error', error.message);
    16.     }
    17.     console.log(error.config);
    18.   });

    使用 validateStatus 配置选项，可以自定义抛出错误的 HTTP code。

    1. axios.get('/getData', {
    2.   validateStatus: function (status) {
    3.     return status < 500; // 处理状态码小于500的情况
    4.   }
    5. })

    使用 toJSON 可以获取更多关于HTTP错误的信息。

    1. axios.get('/getData')
    2.   .catch(function (error) {
    3.     console.log(error.toJSON());
    4.   });

     7.取消请求

    从v0.22.0以后，CancelToken取消请求的方式被弃用，Axios 支持以 fetch API 方式—— AbortController 取消请求：

    1. const controller = new AbortController();
    2.  
    3. axios.get('/getData', {
    4.    signal: controller.signal
    5. }).then(function(response) {
    6.    //...
    7. });
    8. // 取消请求
    9. controller.abort()

    8.完整封装 

    1. 建立http.ts文件
    2.  编写clas Http类

    完整代码如下，亲自测试通过：

    http.ts文件全部代码如下：

    1. import type { AxiosInstance, AxiosRequestConfig } from "axios";
    2. import axios from "axios";
    3.  
    4. class Http {
    5.   private readonly options: AxiosRequestConfig;
    6.   private axiosInstance: AxiosInstance;
    7.  
    8.   // 构造函数 参数 options
    9.   constructor(params: AxiosRequestConfig) {
    10.     this.options = params;
    11.     this.axiosInstance = axios.create(params); // 生成实例
    12.     this.setupInterceptors();
    13.   }
    14.   private setupInterceptors() {
    15.     this.axiosInstance.defaults.baseURL = "/";
    16.     this.axiosInstance.defaults.headers.post["Content-Type"] =
    17.       "application/json";
    18.     this.axiosInstance.interceptors.request.use(
    19.       (config) => {
    20.         if (!config.headers) {
    21.           config.headers = {};
    22.         }
    23.         // config.headers.Authorization = CSRF_TOKEN;
    24.         return config;
    25.       },
    26.       () => {
    27.         return Promise.reject({
    28.           code: 1,
    29.           message: "请求错误，请联系管理员",
    30.         });
    31.       }
    32.     );
    33.  
    34.     this.axiosInstance.interceptors.response.use(
    35.       (response) => {
    36.         return Promise.resolve(response);
    37.       },
    38.       (error) => {
    39.         let message = "";
    40.         if (error.response) {
    41.           switch (error.response.status) {
    42.             case 2:
    43.               message = "未登录，直接跳转到登录页面";
    44.               break;
    45.             case 3:
    46.               message = "TOKEN过期，拒绝访问，直接跳转到登录页面";
    47.               break;
    48.             case 4:
    49.               message = "请求路径错误";
    50.               break;
    51.             case 5:
    52.               message = "系统异常，请联系管理员";
    53.               break;
    54.             default:
    55.               message = "未知错误，请联系管理员";
    56.               break;
    57.           }
    58.         } else {
    59.           if (error.code && error.code == "ECONNABORTED") {
    60.             message = "请求超时，请检查网是否正常";
    61.           } else {
    62.             message = "未知错误，请稍后再试";
    63.           }
    64.         }
    65.         return Promise.reject({
    66.           code: -1,
    67.           message: message,
    68.         });
    69.       }
    70.     );
    71.   }
    72.   /**
    73.    * Http get
    74.    * @param url 请求路径
    75.    * @param config 配置信息
    76.    * @returns Promise
    77.    */
    78.   get(url: string, config?: any): Promise<any> {
    79.     return new Promise((resolve, reject) => {
    80.       this.axiosInstance
    81.         .get(url, config)
    82.         .then((response) => {
    83.           resolve(response.data);
    84.         })
    85.         .catch((error) => {
    86.           reject(error);
    87.         });
    88.     });
    89.   }
    90.   /**
    91.    * Http post
    92.    * @param url 请求路径
    93.    * @param data 请求数据
    94.    * @param config 配置
    95.    * @returns Promise
    96.    */
    97.   post(url: string, data?: any, config?: any): Promise<any> {
    98.     return new Promise((reslove, reject) => {
    99.       this.axiosInstance
    100.         .post(url, data, config)
    101.         .then((response) => {
    102.           reslove(response.data);
    103.         })
    104.         .catch((error) => {
    105.           reject(error);
    106.         });
    107.     });
    108.   }
    109. }
    110. const http = new Http({
    111.   timeout: 1000 * 5,
    112. });
    113. export default http;

    9.总结

    个人经过vue3项目实践，配合mock数据，使用axios请求基本满足前端日常开发的请求方式，至于文件上传，下载请求，只需要修改请求类型符合前后端联调的功能就可以使用了，对于环境的配置，我们需要在base_url上面修改指定的域名环境，这种可以做成配置项，比如在process.env.NODE_ENV填写环境配置，接下来我将配合http的请求方式详细讲解网络请求的过程，谢谢大家的支持，码字不易，希望多多三连支持💗💗💗

  • 相关阅读:
    java计算机毕业设计基于springboo+vue的学生毕业离校系统
    推荐云盘哪个好，各有各的优势
    Kubernetes（K8s）的基础概念
    嗨，程序员，你知道高级工程师用的搜索引擎吗？
    五、Java基本数据类型
    C语言宏定义提供了一些进阶操作
    java计算机毕业设计web智慧医疗平台设计与实现源码+mysql数据库+系统+lw文档+部署
    Flink: Only supported for operators
    力扣刷题第二十五天--二叉树
    基于 SpringBoot 2.7.x 使用最新的 Elasticsearch Java API Client 之 ElasticsearchClient
  • 原文地址：https://blog.csdn.net/weixin_42974827/article/details/126673483