如何将Vue中Axios的最佳实践方式转化为一个长尾关键词？

本文共计2089个文字，预计阅读时间需要9分钟。

目录

1.前言

2.使用

2.1 安装 2.2 基本用例 2.1 get请求 2.2 post请求

3.配置

3.1 语法 3.2 别名

4.Axios实例

4.1 语法 4.2 请求配置 4.3 响应配置 配置的优先级

5.拦截器

6.错误拦截

7.取消请求

8.完整封装

目录

• 1.前言
• 2.使用
• 2.1安装
• 2.2基本用例
• 2.2.1 get请求
• 2.2.2post请求
• 3.配置
• 3.1语法
• 3.2别名
• 4.Axios实例
• 4.1语法
• 4.2请求配置
• 4.3响应的配置
• 配置的优先级
• 5.拦截器
• 6.错误拦截
• 7.取消请求
• 8.完整封装 建立some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} });

  

  4.2请求配置

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

  { // `url` 是用于请求的服务器 URL url: '/user', // `method` 是创建请求时使用的方法 method: 'get', // 默认值 // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL baseURL: 'some-domain.com/api/', // `transformRequest` 允许在向服务器发送前，修改请求数据 // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream // 你可以修改请求头。 transformRequest: [function (data, headers) { // 对发送的 data 进行任意转换处理 return data; }], // `transformResponse` 在传递给 then/catch 前，允许修改响应数据 transformResponse: [function (data) { // 对接收的 data 进行任意转换处理 return data; }], // 自定义请求头 headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params` 是与请求一起发送的 URL 参数 // 必须是一个简单对象或 URLSearchParams 对象 params: { ID: 12345 }, // `data` 是作为请求体被发送的数据 // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法 // 在没有设置 `transformRequest` 时，则必须是以下类型之一: // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - 浏览器专属: FormData, File, Blob // - Node 专属: Stream, Buffer data: { firstName: 'Fred' }, // `timeout` 指定请求超时的毫秒数。 // 如果请求时间超过 `timeout` 的值，则请求会被中断 timeout: 1000, // 默认值是 `0` (永不超时) // `withCredentials` 表示跨域请求时是否需要使用凭证 withCredentials: false, // default // `auth` HTTP Basic Auth auth: { username: 'janedoe', password: 's00pers3cret' }, // `responseType` 表示浏览器将要响应的数据类型 // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream' // 浏览器专属：'blob' responseType: 'json', // 默认值 // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属) // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求 // Note: Ignored for `responseType` of 'stream' or client-side requests responseEncoding: 'utf8', // 默认值 // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称 xsrfCookieName: 'XSRF-TOKEN', // 默认值 // `xsrfHeaderName` 是带有 xsrf token 值的axios-http.com/zh/docs/cancellation cancelToken: new CancelToken(function (cancel) { }), }

  4.3响应的配置

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

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

  配置的优先级

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

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

  5.拦截器

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

  // 生成实例 const instance = axios.create({ baseURL: "/", timeout: 1000, headers: { "Content-Type": "multipart/form-data;charset=utf-8" }, }); // 请求的拦截器 instance.interceptors.request.use( function (config) { // 在发送请求之前做些什么 console.log(config, "config"); return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); // 返回的拦截器 instance.interceptors.response.use( function (res) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 console.log(res, "res"); return res; }, function (error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); } );

  6.错误拦截

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

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

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

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

  const controller = new AbortController(); axios.get('/getData', { signal: controller.signal }).then(function(response) { //... }); // 取消请求 controller.abort()

  7.取消请求

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

  const controller = new AbortController(); axios.get('/getData', { signal: controller.signal }).then(function(response) { //... }); // 取消请求 controller.abort()

  8.完整封装 建立http.ts文件编写clas Http类

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

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

  import type { AxiosInstance, AxiosRequestConfig } from "axios"; import axios from "axios"; class Http { private readonly options: AxiosRequestConfig; private axiosInstance: AxiosInstance; // 构造函数 参数 options constructor(params: AxiosRequestConfig) { this.options = params; this.axiosInstance = axios.create(params); // 生成实例 this.setupInterceptors(); } private setupInterceptors() { this.axiosInstance.defaults.baseURL = "/"; this.axiosInstance.defaults.headers.post["Content-Type"] = "application/json"; this.axiosInstance.interceptors.request.use( (config) => { if (!config.headers) { config.headers = {}; } // config.headers.Authorization = CSRF_TOKEN; return config; }, () => { return Promise.reject({ code: 1, message: "请求错误，请联系管理员", }); } ); this.axiosInstance.interceptors.response.use( (response) => { return Promise.resolve(response); }, (error) => { let message = ""; if (error.response) { switch (error.response.status) { case 2: message = "未登录，直接跳转到登录页面"; break; case 3: message = "TOKEN过期，拒绝访问，直接跳转到登录页面"; break; case 4: message = "请求路径错误"; break; case 5: message = "系统异常，请联系管理员"; break; default: message = "未知错误，请联系管理员"; break; } } else { if (error.code && error.code == "ECONNABORTED") { message = "请求超时，请检查网是否正常"; } else { message = "未知错误，请稍后再试"; } } return Promise.reject({ code: -1, message: message, }); } ); } /** * Http get * @param url 请求路径 * @param config 配置信息 * @returns Promise */ get(url: string, config?: any): Promise<any> { return new Promise((resolve, reject) => { this.axiosInstance .get(url, config) .then((response) => { resolve(response.data); }) .catch((error) => { reject(error); }); }); } /** * Http post * @param url 请求路径 * @param data 请求数据 * @param config 配置 * @returns Promise */ post(url: string, data?: any, config?: any): Promise<any> { return new Promise((reslove, reject) => { this.axiosInstance .post(url, data, config) .then((response) => { reslove(response.data); }) .catch((error) => { reject(error); }); }); } } const http = new Http({ timeout: 1000 * 5, }); export default http;

  9.总结

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