一、axios 创建实例对象
axios
创建实例对象,代码如下所示:
<!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>axios实例对象创建</title>
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<br>
</div>
<script>
const btns = document.querySelectorAll('button');
const duanzi = axios.create({
baseURL: 'https://api.apiopen.top',
timeout: 2000
});
const onather = axios.create({
baseURL: 'https://b.com',
timeout: 2000,
});
duanzi.get('/getJoke').then(response => {
console.log(response.data)
})
</script>
</body>
</html>
二、axios 拦截器
axios
拦截器,代码如下所示:
<!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>axios拦截器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<script>
axios.interceptors.request.use(function (config){
console.log('请求拦截器成功 1');
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.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;
}, 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>
</body>
</html>
三、axios 请求取消
axios
请求取消,代码如下所示:
<!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>axios请求取消</title>
<link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">axios取消请求</h2>
<button class="btn btn-primary"> 发送请求 </button>
<button class="btn btn-warning" > 取消请求 </button>
</div>
<script>
const btns = document.querySelectorAll('button');
let cancel = null;
btns[0].onclick = function () {
if (cancel !== null) {
cancel();
}
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
cancelToken: new axios.cancelToken(function (c) {
cancel = c;
})
}).then(response => {
console.log(response);
cancel = null;
})
}
btns[1].onclick = function () {
cancel();
}
</script>
</body>
</html>