一、关于axios的介绍
1.1 axios是什么?
- 前端最流行的 ajax 请求库
- react/vue 官方都推荐使用 axios 发 ajax 请求
- 文档: https://github.com/axios/axios
1.2 axios的特点
- 基于 xhr + promise 的异步 ajax 请求库
- 浏览器端/node 端都可以使用
- 支持请求/响应拦截器
- 支持请求取消
- 请求/响应数据转换
- 批量发送多个请求
1.3 axios常用语法
- axios(config): 通用/最本质的发任意类型请求的方式
- axios(url[, config]): 可以只指定 url 发 get 请求
- axios.request(config): 等同于 axios(config)
- axios.get(url[, config]): 发 get 请求
- axios.delete(url[, config]): 发 delete 请求
- axios.post(url[, data, config]): 发 post 请求
- axios.put(url[, data, config]): 发 put 请求
- axios.defaults.xxx: 请求的默认全局配置
- axios.interceptors.request.use(): 添加请求拦截器
- axios.interceptors.response.use(): 添加响应拦截器
- axios.create([config]): 创建一个新的 axios(它没有下面的功能)
- axios.Cancel(): 用于创建取消请求的错误对象
- axios.CancelToken(): 用于创建取消请求的 token 对象
- axios.isCancel(): 是否是一个取消请求的错误
- axios.all(promises): 用于批量执行多个异步请求
- axios.spread(): 用来指定接收所有成功数据的回调函数的方法
1.4 难点语法的理解和使用
1.4.1. axios.create(config)
- 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置
- 新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
- 为什么要设计这个语法?
- 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一
样, 如何处理
- 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一
- 解决: 创建 2 个新 axios, 每个都有自己特有的配置, 分别应用到不同要
求的接口请求中
拦截器函数/ajax 请求/请求的回调函数的调用顺序
- 说明: 调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程
- 流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响
应拦截器 2 => 请求的回调 - 注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应
拦截器传递的是 response
1.4.2. 取消请求
- 基本流程
配置 cancelToken 对象
缓存用于取消请求的 cancel 函数
在后面特定时机调用 cancel 函数取消请求
在错误回调中判断如果 error 是 cancel, 做相应处理 - 实现功能
点击按钮, 取消某个正在请求中的请求
在请求一个接口前, 取消前面一个未完成的请求
二、使用
1.引入axios
引入axios有以下几种方法
1.1 通过cdn引入,在html页面中加上这行代码
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
1.2 通过npm包管理工具引入(需要有node.js环境)
打开命令行工具,输入以下命令然后回车
npm install axios
1.3 通过yarn包管理工具引入
yarn add axios
我们来测试以下是否引入成功,在html的body节点中增加script节点,并在其内输入console.log(axios)
<body>
<script>
console.log(axios);
</script>
</body>
在浏览器中打开,查看控制台,有如下界面则说明axios引入成功
2.发送几个请求练练手先
这里的html结构是这样的
<body>
<div class="container">
<button class="btn btn-danger">发送GET请求</button>
<button class="btn btn-primary">发送POST请求</button>
<button class="btn btn-success">发送PUT请求</button>
<button class="btn btn-info">发送DELETE请求</button>
</div>
<script>
</script>
</body>
2.1 点击按钮发送GET请求
<script>
// 获取按钮
const btn = document.querySelectorAll('button')
btn[0].addEventListener('click', function () {
// 使用axios发送ajax请求
axios({
// 请求类型
method: 'GET',
// url
url: 'http://localhost:3000/posts/2'
}).then(res => {
console.log(res);
})
})
</script>
查看结果
查看结果
2.2 发送POST请求
// 发送POST请求,添加一篇新文章
btn[1].onclick = function () {
// 发送ajax请求
axios({
// 请求类型
method: 'POST',
// url
url: 'http://localhost:3000/posts',
// 设置请求体
data: {
title: 'hello',
author: '张居然'
}
}).then(res => {
console.log(res);
})
查看结果
2.3 发送PUT请求,修改一条数据
// 发送PUT请求,修改内容
btn[2].onclick = function () {
// 发送ajax请求
axios({
// 请求类型
method: 'PUT',
// url
url: 'http://localhost:3000/posts/3',
// 设置请求体
data: {
title: 'hello',
author: '里斯'
}
}).then(res => {
console.log(res);
})
}
查看结果
2.4 发送delete请求,删除一条数据
// 发送delete请求,删除一条内容
btn[3].onclick = function () {
// 发送ajax请求
axios({
// 请求类型
method: 'DELETE',
// url
url: 'http://localhost:3000/posts/4',
}).then(res => {
console.log(res);
})
}
查看结果
三、axios的其他使用方式
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
下面将使用axios.request()方法和axios.post()方法做一个演示,其他的方法使用步骤都是类似于这两种方法的
3.1 axios.request()方法
html结构同上
点击发送GET请求
<script>
// 获取按钮
const btn = document.querySelectorAll('button')
// 发送GET请求
btn[0].addEventListener('click', function () {
// 发送ajax请求
axios.request({
// 请求类型
method: 'GET',
URL,
url: 'http://localhost:3000/comments'
}).then(res => {
console.log(res);
})
})
</script>
查看结果
点击发送axios.post()请求
注意post方法的参数(url,{data},{一些配置项})
btn[1].onclick = function () {
axios.post('http://localhost:3000/comments', {
body: '哇,太胖了',
postId: 2
}).then(res => {
console.log(res);
})
}
查看结构
四、还可以给axios添加一些默认配置
<script>
//获取按钮
const btns = document.querySelectorAll('button');
//默认配置
axios.defaults.method = 'GET';//设置默认的请求类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};
axios.defaults.timeout = 3000;//
btns[0].onclick = function(){
axios({
url: '/posts'
}).then(response => {
console.log(response);
})
}
</script>
4.1 给axios创建实例对象
<script>
//获取按钮
const btns = document.querySelectorAll('button');
//创建实例对象 /getJoke
const duanzi = axios.create({
baseURL: 'https://api.apiopen.top',
timeout: 2000
});
const onather = axios.create({
baseURL: 'https://b.com',
timeout: 2000
});
//这里 duanzi 与 axios 对象的功能几近是一样的
// duanzi({
// url: '/getJoke',
// }).then(response => {
// console.log(response);
// });
duanzi.get('/getJoke').then(response => {
console.log(response.data)
})
</script>
五、拦截器
<script>
// Promise
// 设置请求拦截器 config 配置对象
axios.interceptors.request.use(function (config) {
console.log('请求拦截器 成功 - 1号');
//修改 config 中的参数
config.params = {a:100};
return config;
}, function (error) {
console.log('请求拦截器 失败 - 1号');
return Promise.reject(error);
});
axios.interceptors.request.use(function (config) {
console.log('请求拦截器 成功 - 2号');
//修改 config 中的参数
config.timeout = 2000;
return config;
}, function (error) {
console.log('请求拦截器 失败 - 2号');
return Promise.reject(error);
});
// 设置响应拦截器
axios.interceptors.response.use(function (response) {
console.log('响应拦截器 成功 1号');
return response.data;
// return response;
}, function (error) {
console.log('响应拦截器 失败 1号')
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
console.log('响应拦截器 成功 2号')
return response;
}, function (error) {
console.log('响应拦截器 失败 2号')
return Promise.reject(error);
});
//发送请求
axios({
method: 'GET',
url: 'http://localhost:3000/posts'
}).then(response => {
console.log('自定义回调处理成功的结果');
console.log(response);
});
</script>
六、取消请求
<script>
//获取按钮
const btns = document.querySelectorAll('button');
//2.声明全局变量
let cancel = null;
//发送请求
btns[0].onclick = function(){
//检测上一次的请求是否已经完成
if(cancel !== null){
//取消上一次的请求
cancel();
}
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
//1. 添加配置对象的属性
cancelToken: new axios.CancelToken(function(c){
//3. 将 c 的值赋值给 cancel
cancel = c;
})
}).then(response => {
console.log(response);
//将 cancel 的值初始化
cancel = null;
})
}
//绑定第二个事件取消请求
btns[1].onclick = function(){
cancel();
}
</script>