axios、axios二次封装、api解耦
本文章主要讲解项目中axios的封装问题，这一块知识点是必须拿下的。
目录
一、axios基础使用
1、下载axios
2、引入axios
3、使用axios发送请求
4、举例
二、axios二次封装【必须掌握，公司里必用到】
1、为什么要进行二次封装？
2、二次封装步骤
①新建文件request/request.js
②编写js代码
3、使用二次封装发送axios请求
4、注意
三、api解耦
1、什么是api解耦？
2、api解耦步骤
①新建文件api/xxx.js
②编写代码
③使用api
3、api解耦的重要性
结语
一、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解耦的全部内容，介绍的比较详细，喜欢的话留下一个关注吧~~