项目学习笔记之请求axios的封装

最新推荐文章于 2024-07-11 20:00:00 发布

原创最新推荐文章于 2024-07-11 20:00:00 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习

前端专栏收录该内容

9 篇文章

订阅专栏

文章讲述了在项目开始前封装Axios的原因，如便于后台地址修改、简化调用和避免回调地狱。文中详细介绍了如何创建axios实例，设置基础URL和超时时间，并添加请求和响应的拦截器。此外，还演示了如何封装特定API，利用函数是否执行的区别来控制请求的触发。最后，提到了后续将加入请求头等更多信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、项目开始前，都需要先进行封装axios，为什么不直接用axios呢？

防止后台地址修改，需要全文代码进行修改，封装以后，可以直接在配置文件里面一次修改。

可以把需要调用的api封装起来，修改方便。

可以避免回调地狱

二、开始封装，首先是后端接口的封装：

import axios from "axios";

const url_instance = axios.create({
    baseURL: '*****',
    timeout: 5000
})

该位置如果有多个ip，可以配置多个实例。

发送请求前以及响应数据后的拦截封装：

url_instance.interceptors.request.use(config => {
    return config
},error => {
    Promise.reject(error)
})
url_instance.interceptors.response.use(data => {
    return data.data
}, error => {
    Promise.reject(error)
})
export default url_instance

直接把请求后的数据，使用data.data，方便后期获取接口数据，省去解构赋值。

最后是各个api的封装，这里使用了一个小技巧，没有中间的括号，那么JingpinAPI就是一个调用就直接执行的方法，那么加上括号以后，就是一个方法，当别的文件引用这个文件的时候，并不会马上执行一遍，而别的文件引用只需要使用JingpinAPI() 加个括号，执行程序

import request from "@/request/request"

export const JingpinAPI = () => request.get('/products/recommend')

三、目前项目学习封装到这里，后续还得加上请求头等信息。

主要学习到的还是加上括号的一个操作。