文章目录
- 一、基础知识
-
- [1. 定义和使用](#1. 定义和使用)
- [2. 并发请求](#2. 并发请求)
- [3. 全局配置](#3. 全局配置)
- [4. 封装 axios](#4. 封装 axios)
- [5. axios 拦截器](#5. axios 拦截器)
- [6. Vue 中封装 axios](#6. Vue 中封装 axios)
- [二、axios 二次封装](#二、axios 二次封装)
- [三、api 解耦](#三、api 解耦)
一、基础知识
1. 定义和使用
axios 是基于 promise 对 ajax 的一种封装，是异步请求的一种工具。
axios 中文文档，https://www.axios-http.cn/
使用 axios 发送请求：
① 方式一
html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
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 拦截器是在发出请求前或收到响应后，对其进行全局处理的机制。 比如，发起请求时可以添加网页加载动画，收到响应后可以进行响应的数据处理。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//请求拦截器
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
① 下载
Shell
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 二次封装
先看一下以前是怎么发送请求的：
html
<script>
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
}
})
}
② 在需要用到接口的地方通过花括号导入相对应的方法，将以前 request({ }) 的地方替换成我们的接口方法。
可同时导入多个方法，用逗号隔开！