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 安装 npm install axios; 示例代码

https.js

import axios from"axios"; // const token = localStorage.getItem("accessToken"); export const https = axios.create({ baseURL:"http://localhost:3000", timeout: 15000, headers: {}, }); // 添加请求拦截器 https.interceptors.request.use( (config) => { // 在发送请求之前做些什么 // if (token) { // config.headers.accessToken = `Bearer ${token}`; // } return config; }, (error) => { // 对请求错误做些什么 // console.log(error); return Promise.reject(error); } ); // 添加响应拦截器 https.interceptors.response.use( (response) => { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 // console.log(response); if (response.status === 200) { // console.log(Promise.resolve(response)); return Promise.resolve(response); } else { return Promise.reject(response); } // return response; }, (error) => { // 超出 2xx 范围的状态码都会触发该函数。 console.log(error); // 对响应错误做点什么 return Promise.reject(error); } ); 在Vue中引入使用 import { https } from"@/api/http"; //GET请求 // 写过的一个分页查询为例 https .get("/display", { params: { pageSize: page.pageSize.value, currentPage: page.currentPage.value, }, }) .then((res) => { console.log(res); }) .catch((error) => { console.log(error); }); // 另一种写法 https.get("/display?ID=12345") .then((res) => { console.log(res); }) .catch((error) => { console.log(error); }); //POST请求 https .post("/display", { id: id.value, }) .then((res) => { console.log(res); }) .catch((error) => { console.log(error); });