axios、axios二次封装、api解耦

雪碧聊技术

已于 2025-02-25 15:25:24 修改

阅读量1.9k

点赞数 31

分类专栏：毕业设计 Ajax 文章标签： javascript 前端 axios请求 axios二次封装 axios解耦成api

于 2025-02-25 15:22:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_63981644/article/details/145851035

版权

毕业设计同时被 2 个专栏收录

54 篇文章

订阅专栏

Ajax

9 篇文章

订阅专栏

本文章主要讲解项目中axios的封装问题，这一块知识点是必须拿下的。

二、axios二次封装【必须掌握，公司里必用到】

1、为什么要进行二次封装？

2、二次封装步骤

①新建文件request/request.js

一、axios基础使用

1、下载axios

npm install axios

2、引入axios

import axios from 'axios'

3、使用axios发送请求

4、举例

生成情话的后端接口https://api.xygeng.cn/one

我们使用axios往这个接口发送请求，就会获得一句情话。

//引入axios
import axios from 'axios'
//使用axios发送请求到后端接口,并获取返回的数据
axios({
  url:"https://api.xygeng.cn/one",
  method:"get"
}).then(res=>{
  //res：后端返回给前端的数据
  console.log(res.data.data);//res.data.data是里面的那句情话
})

运行结果：

二、axios二次封装【必须掌握，公司里必用到】

1、为什么要进行二次封装？

因为上面的那个接口https://api.xygeng.cn/one 的公共部分是https://api.xygeng.cn，也就是说前端项目的其他地方发送的axios请求，也会包含这个公共部分，因此需要提取出来。

如果不提取出来，可以想象一下，我们有几百个地方发送的axios都包含了这个公共部分https://api.xygeng.cn，如果哪天我们的后端服务器换了，我们就需要手动改几百处，实在是太麻烦。

综上，我们要进行axios的二次封装，即：将axios请求的url的公共部分提取出来。

2、二次封装步骤

①新建文件request/request.js

②编写js代码

//1、导入axios
import axios from 'axios'

//2、创建axios对象
const service = axios.create({
    //axios请求的基础链接，只有换后端服务器时（如本地项目部署到云服务器），才会改动这个
    baseURL:'https://api.xygeng.cn'

});

//3、给axios对象，设置【请求拦截器】，前端每次给后端发送数据时要做的事
service.interceptors.request.use(config => {
    return config;
},error => {
    Promise.reject(error);
})

//4、给axios对象，设置【响应拦截器】，后端响应给前端数据时要做的事
service.interceptors.response.use(
    (response) => {
        return response.data;
    },
    error => {
        return Promise.reject(new Error(error.response.data))
    }
)

//5、暴露axios对象service
export default service

请求拦截器：常常每个axios请求url前，都会携带token。
响应拦截器：常用来判断code码。

3、使用二次封装发送axios请求

//导入刚才封装的axios对象
import request from '@/request/request'

//使用axios对象发送请求
request({
  url:"/one",//此时URL公共前缀就不用写了
  //method:"get"
}).then(res=>{
  console.log(res.data);//此时res.data就是那句情话
})

查看运行结果

4、注意

理解：

那句情话始终都是【后端返回数据.data.data】，就看上图中的res和response怎么倒腾了。

而且此时response.data充当res。

如果响应拦截器中，return的是response的话，那么response就充当res。说白了就是return的是啥，啥就充当res。

比喻：

就是将js代码，写入了那个总的js文件中。说白了就是将碗里的米饭，放回锅里了，但是无论如何，我都吃锅+碗的，所以总数不变，功能不变。

三、api解耦

1、什么是api解耦？

我们很多地方可能都要发送同一个axios请求，此时我们总不能每次都重复写一遍代码吧，因此需要将某个请求提取到一个js文件中。

2、api解耦步骤

①新建文件api/xxx.js

②编写代码

import request from '@/request/request'

//编写方法“获取情话”,并将其暴露出去
export function getQinghua(){
    return request({
        url:'/one'
    })
    /* 
    或者写成
    return request.get('/one')
    */
}

//如果想编写其他方法，可以同上，继续暴露出去。

③使用api

//导入自定义api
import { getQinghua } from "@/api/qinghua";
//使用api发送请求
getQinghua().then(res=>{
  console.log(res.data);//此时这还是那句情话
})

运行效果：

3、api解耦的重要性

以后项目中，肯定需要往后端发送一大堆axios请求，我们此时可以把这些axios请求写成一个个api，并按照一定规律存放在不同的js文件中即可。

结语

以上就是axios、axios二次封装、api解耦的全部内容，介绍的比较详细，喜欢的话留下一个关注吧~~