当前位置：首页 > news >正文

Vue 中简易封装网络请求（Axios），包含请求拦截器和响应拦截器

news 2025/9/15 21:36:23

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