ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue 中简易封装网络请求（Axios），包含请求拦截器和响应拦截器 [打印本页]

---

作者: tsx81428    时间: 2024-6-7 18:23
标题: Vue 中简易封装网络请求（Axios），包含请求拦截器和响应拦截器
Vue 中简易封装网络请求（Axios），包含请求拦截器和响应拦截器

axios简介

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
Axios官方中文文档
特性

• 从浏览器创建 XMLHttpRequests
  
• 从 node.js 创建 http 请求
  
• 支持 Promise API
  
• 拦截请求和响应
  
• 转换请求和响应数据
  
• 取消请求
  
• 超时处理
  
• 查询参数序列化支持嵌套项处理
  
• 自动将请求体序列化为：
  JSON (application/json)
  Multipart / FormData (multipart/form-data)
  URL encoded form (application/x-www-form-urlencoded)
  
• 将 HTML Form 转换成 JSON 进行请求
  
• 自动转换JSON数据
  
• 获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
  
• 为 node.js 设置带宽限制
  
• 兼容符合规范的 FormData 和 Blob（包括 node.js）
  
• 客户端支持防御XSRF
  

安装

1. npm install axios;

复制代码

示例代码

https.js

1. import axios from "axios";
2. // const token = localStorage.getItem("accessToken");
4. export const https = axios.create({
5.   baseURL: "http://localhost:3000",
6.   timeout: 15000,
7.   headers: {},
8. });
10. // 添加请求拦截器
11. https.interceptors.request.use(
12.   (config) => {
13.     // 在发送请求之前做些什么
14.     // if (token) {
15.     //   config.headers.accessToken = `Bearer ${token}`;
16.     // }
17.     return config;
18.   },
19.   (error) => {
20.     // 对请求错误做些什么
21.     // console.log(error);
22.     return Promise.reject(error);
23.   }
24. );
26. // 添加响应拦截器
27. https.interceptors.response.use(
28.   (response) => {
29.     // 2xx 范围内的状态码都会触发该函数。
30.     // 对响应数据做点什么
31.     // console.log(response);
32.     if (response.status === 200) {
33.       // console.log(Promise.resolve(response));
34.       return Promise.resolve(response);
35.     } else {
36.       return Promise.reject(response);
37.     }
38.     // return response;
39.   },
40.   (error) => {
41.     // 超出 2xx 范围的状态码都会触发该函数。
42.     console.log(error);
43.     // 对响应错误做点什么
44.     return Promise.reject(error);
45.   }
46. );

复制代码

在Vue中引入使用

1. import { https } from "@/api/http";
2. //GET请求
3. // 写过的一个分页查询为例
4. https
5.   .get("/display", {
6.     params: {
7.       pageSize: page.pageSize.value,
8.       currentPage: page.currentPage.value,
9.     },
10.   })
11.   .then((res) => {
12.     console.log(res);
13.   })
14.   .catch((error) => {
15.     console.log(error);
16.   });
17.   // 另一种写法
18. https.get("/display?ID=12345")
19.   .then((res) => {
20.     console.log(res);
21.   })
22.   .catch((error) => {
23.     console.log(error);
24.   });
26. //POST请求
27. https
28.   .post("/display", {
29.           id: id.value,
30.   })
31.   .then((res) => {
32.     console.log(res);
33.   })
34.   .catch((error) => {
35.     console.log(error);
36.   });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4