项目实战#
├─ src
│ ├─ api
│ │ ├─ request.js
│ │ └─ api.js
│ └─ ...
└─ ......
1 创建 Axios 实例#
为了便于维护，开发中通常会对 Axios 进行封装，建立一个统一的文件来管理请求。
此外，还可以通过拦截器对请求和响应进行预处理。
1import axios from "axios";
2
3// 创建 Axios 实例
4const instance = axios.create({
5 baseURL: "http://127.0.0.1:3000",
6 timeout: 3000,
7});
8
9// 请求拦截器
10instance.interceptors.request.use(
11 (config) => {
12 // 在这里可以对请求头、请求参数等进行处理
13 return config;
14 },
15 (err) => {
16 return Promise.reject(err);
17 }
18);
19
20// 响应拦截器
21instance.interceptors.response.use(
22 (response) => {
23 // 在这里可以对响应数据进行统一处理
24 return response;
25 },
26 (err) => {
27 return Promise.reject(err);
28 }
29);
30
31export default instance;2 统一管理 API 请求#
通过 api.js 文件统一管理 API 请求，便于维护和扩展。
1// 导入封装好的 Axios 实例
2import request from "./request";
3
4// 按需导出每个 API 请求
5export const GetAPI = () => request.get("/posts");3 发起请求#
在项目中使用封装好的 API 方法发起请求。
1import { GetAPI } from "@/api/api";
2
3// 发起 GET 请求
4GetAPI().then((response) => {
5 console.log("请求成功：", response.data);
6}).catch((error) => {
7 console.error("请求失败：", error);
8});目录