使用 axios 进行 HTTP 请求
1、介绍
什么是 axios
axios 是一个基于 promise 的 HTTP 库，可以用于浏览器和 Node.js 中发送 HTTP 请求。它的底层实现是 XMLHttpRequest，对开发者提供了简洁的 API 来处理各种 HTTP 请求。
axios 的特性
- 从浏览器中创建 XMLHttpRequests
- 从 Node.js 创建 HTTP 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
axios 官网
2、安装和引入
浏览器环境
通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Node.js 环境
通过 npm 安装：
npm install axios
然后在代码中引入：
const axios = require('axios');
3、axios 基本使用
语法
axios.get('url')
.then(response => {
// 请求成功处理
})
.catch(error => {
// 请求失败处理
})
.then(() => {
// 请求完成处理（无论成功或失败）
});
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Axios Basic Usage</title>
</head>
<body>
<button class="btn1">基本使用</button>
<button class="btn2">发送 GET 请求</button>
<button class="btn3">发送 POST 请求</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 基本使用
document.querySelector('.btn1').addEventListener('click', function() {
axios.get('https://autumnfish.cn/api/joke/list?num=10')
.then(response => {
console.log(response);
console.log(response.data);
})
.catch(error => {
console.error(error);
})
.then(() => {
console.log('请求完成');
});
});
</script>
</body>
</html>
4、axios 发送 GET 请求
语法
axios.get('url', {
params: { key: value }
})
.then(response => {
// 请求成功处理
});
示例
document.querySelector('.btn2').addEventListener('click', function() {
axios.get('https://autumnfish.cn/api/joke/list', {
params: { num: 10 }
}).then(response => {
console.log(response.data);
});
});
5、axios 发送 POST 请求
语法
axios.post('url', {
key: value
})
.then(response => {
// 请求成功处理
});
示例
document.querySelector('.btn3').addEventListener('click', function() {
axios.post('http://www.liulongbin.top:3009/api/login', {
username: '1423543',
password: 'afsfs'
}).then(response => {
console.log(response.data);
});
});
6、高级使用
拦截器
axios 提供了请求和响应拦截器，可以在请求或响应被处理前做一些操作。
// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});
取消请求
可以使用 CancelToken 取消请求。
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
});
// 取消请求
cancel();
并发请求
axios 提供了 axios.all 和 axios.spread 方法来处理并发请求。
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread((acct, perms) => {
// 两个请求现在都执行完成
console.log(acct.data);
console.log(perms.data);
}));
错误处理
处理请求中的错误是非常重要的，axios 提供了详细的错误信息。
axios.get('/user/12345')
.then(response => {
console.log(response);
})
.catch(error => {
if (error.response) {
// 请求已发出，服务器响应了状态码，但状态码超出了 2xx 范围
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已发出，但没有收到响应
console.log(error.request);
} else {
// 发生了在设置请求时触发的错误
console.log('Error', error.message);
}
console.log(error.config);
});
7、总结
axios 是一个功能强大的 HTTP 请求库，适用于浏览器和 Node.js 环境。它提供了丰富的功能，包括请求和响应拦截器、取消请求、并发请求处理等。通过本文的介绍，你应该能够掌握 axios 的基本用法和一些高级用法，并在实际项目中灵活应用。。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 使用 axios 进行 HTTP 请求
发表评论 取消回复