axios
概述
一个 ajax 请求库。
简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
axios:
前端最流行的 ajax 请求库
react/vue 官方都推荐使用 axios 发 ajax 请求
特点：
基于 xhr + promise 的异步 ajax 请求库
浏览器端/node 端都可以使用
支持请求/响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求
常用语法:
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()
用来指定接收所有成功数据的回调函数的方法
*/
</script>
</head>
<body>
</body>
</html>使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
axios.create(config)
*/
//创建实例对象 /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)
})
// 拦截器函数/ajax 请求/请求的回调函数的调用顺序
// 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);
});
// 取消请求
// 基本流程
// 配置 cancelToken 对象
// 缓存用于取消请求的 cancel 函数
// 在后面特定时机调用 cancel 函数取消请求
// 在错误回调中判断如果 error 是 cancel, 做相应处理
// 实现功能 点击按钮, 取消某个正在请求中的请求,
// 实现功能 点击按钮, 取消某个正在请求中的请求
//获取按钮
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(); }
// 默认配置
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>
</head>
<body>
</body>
</html>