axios 二次封装及 api 解耦【Vue】

文章目录

一、基础知识
- 1. 定义和使用
- 2. 并发请求
- 3. 全局配置
- 4. 封装 axios
- 5. axios 拦截器
- 6. Vue 中封装 axios
二、axios 二次封装
三、api 解耦

一、基础知识

1. 定义和使用

axios 是基于 promise 对 ajax 的一种封装，是异步请求的一种工具。

axios 中文文档，https://www.axios-http.cn/

在这里插入图片描述

使用 axios 发送请求：

① 方式一

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>javascript">axios({url: 'http://localhost:8080/user',method: 'post',params: {id: '1',name: '栈老师'}}).then(res => {console.log(res)}).catch(err => {console.log(err);})
</script>

axios 默认发送的是 get 请求！

② 方式二

javascript">//发送get请求
axios.get('http://localhost:8080/user', {params: {id: 2, name: '栈老师'}}).then(res => {console.log(res)
}).catch(err => {console.log(err)
})//发送post请求
axios.post('http://localhost:8080/user', {id: 2, name: '栈老师'}).then(res => {console.log(res)
}).catch(err => {console.log(err)
})

2. 并发请求

javascript">//方式一
axios.all([axios.get('http://localhost:8080/user'),axios.get('http://localhost:8080/admin', {params: {id: 1}})
]).then(res => {console.log(res)
}) catch(err => {console.log(err)
})//方式二
axios.all([axios.get('http://localhost:8080/user'),axios.get('http://localhost:8080/admin', {params: {id: 1}})
]).then(axios.spead((res1, res2) => {console.log(res1);console.log(res2);})
) catch(err => {console.log(err)
})

可同时发送多个请求，请求成功后的返回值为一个数组！

3. 全局配置

在这里插入图片描述

4. 封装 axios

javascript">let newVar = axios.create({baseURL = 'http://localhost:8080',timeout = 500
})newVar({url: 'user'
}).then(res => {console.log(res)
})

5. axios 拦截器

分类：请求拦截器和响应拦截器。

作用：axios 拦截器是在发出请求前或收到响应后，对其进行全局处理的机制。 比如，发起请求时可以添加网页加载动画，收到响应后可以进行响应的数据处理。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>javascript">//请求拦截器axios.interceptors.request.use(config=> {console.log('进入请求拦截器'+ config)//放行return config}, err => {console.log('请求失败' + err)})//响应拦截器axios.interceptors.response.use(config=> {console.log('进入响应拦截器'+ config)//放行return config.data}, err => {console.log('请求失败' + err)})axios.get('http://localhost:8080/user').then(res => {console.log(res)})</script></body>
</html>

拦截处理之后，一定要通过 return 放行！

6. Vue 中封装 axios

① 下载

npm install axios -S

② 引入

javascript">import axios from 'axios'

③ 使用

javascript">axios.get()
axios.post()
axios({url: '请求的url',method: '请求的方式',data: {}  //post传值方式params: {}  //get传值方式
}).then(res => {console.log(res)  //res就是后端给前端返回的数据
})

二、axios 二次封装

先看一下以前是怎么发送请求的：

<script>javascript">
import axios from 'axios'
export default {created() {axios({url: 'http://localhost:8081/api1/test',params: {id: 1}}).then(res => {console.log(res)})}
}
</script>

需要在每一个需要发送请求的组件中导入 axios，编写完整的 url 路径，不便于管理和维护。

二次封装解决的问题：方便管理、操作和维护。比如：请求的 url 地址统一管理，传递的 headers 统一管理等。

① 在 src 目录下新建 utils 文件夹，创建 request.js 文件。

javascript">import axios from 'axios';
// 1.创建axios对象
const service = axios.create({// baseURL是基础路径baseURL: 'http://localhost:8081'
});
// 2.请求拦截器，前端给后端发送数据
service.interceptors.request.use(config => {console.log(1);return config;
}, error => {Promise.reject(error);
});
// 3.响应拦截器，后端给前端返回数据
service.interceptors.response.use((response) => {console.log(2);return response.data;},error => {return Promise.reject(new Error(error.response.data))}
)
export default service

② 使用 request.js，首先导入 request，接着将 axios 请求变为 request。

在这里插入图片描述

此时的 url 只需写后半部分就可以，基础路径已在 request.js 中定义，res 就是响应拦截器返回的数据！

③ 编写后端测试代码，注意跨域问题，可以在后端接口上加一个 @CrossOrigin 注解。

在这里插入图片描述

④ 运行项目，可以看到请求已经发送成功。

在这里插入图片描述

在请求拦截器里面通过 headers 给后端传递 token，在响应拦截器里面可以对后端传过来的 code 码进行判断！

三、api 解耦

什么时候需要解耦呢？
同一个接口会在多个地方用到，为降低代码的耦合度和冗余度，我们可以将 api 写在单独的文件里面，进行解耦。

① 创建一个 api 目录，新建 course.js 文件，所有的接口信息都写在这里，外部通过调用方法即可使用。

javascript">import request from '@/utils/request'export function getUser() {return request({url: '/api1/test',params: {id: 1}})
}export function getAdmin() {return request({url: '/api2/test',params: {id: 2}})
}