Axios使用方法-实现前后端交互
2023-02-26 09:51:13 时间
什么是Axios
Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 Axios文档地址:https://www.axios-http.cn/
特性:
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
使用方式
Axios引入
外部引入cdn,以下两种方式任选一种即可。
//第一种
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//第二种
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Axios发送请求
使用示例(来自Axios文档):
//第一种
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});
//第二种
// 上述请求也可以按以下方式完成(可选)
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// 总是会执行
});
//第三种Post请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
也可以使用Axios api来传递相关配置创建请求
// 发起一个post请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
响应结构
一个请求的响应包含以下信息。
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 是服务器响应头
// 所有的 header 名称都是小写,而且可以使用方括号语法访问
// 例如: `response.headers['content-type']`
headers: {},
// `config` 是 `axios` 请求的配置信息
config: {},
// `request` 是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects),
// 在浏览器中则是 XMLHttpRequest 实例
request: {}
}
当使用 then
时,将接收如下响应
axios.get('/user/12345')
.then(function (response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
示例代码
示例代码①:
// 1. 调用 axios 方法得到的返回值是 Promise 对象
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: '接口地址',
// URL 中的查询参数
params: {
id: 1
}
}).then(function (result) {
console.log(result)
//result.data为获取到的数据
})
示例代码②:
axios({
url: '/getUsers',
method: 'get',
responseType: 'json', // 默认的
data: {
//'a': 1,
//'b': 2,
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
});
本文共 416 个字数,平均阅读时长 ≈ 2分钟
相关文章
- 用 Python 制作可视化 GUI 界面,一键实现证件照背景颜色的替换
- 用 Python 实现批量打包程序的工具~
- 建议收藏,五个Python迷你项目(附源码)
- Python分支语句常见用法
- 您必须知道的十个有用的Python一行程序
- Python面试高频问题:浅拷贝和深拷贝
- 用 Python 高效处理大文件
- 分享一个趣味性十足的Python可视化技巧
- 分享:四款 Python 超酷终端进度条
- 值得收藏的30道Python练手题(附详解)
- 11 个非常实用的 Python 和 Shell 拿来就用脚本实例!
- 一个好用的 Python 日期库 -- pendulum
- 乾坤大挪移,如何将同步阻塞(sync)三方库包转换为异步非阻塞(async)模式?Python3.10实现。
- 用python写一个漂亮的烟花
- 用python检测微信好友是否删除自己
- 用python画一只布朗熊
- python实现微信不断给好友发消息
- 用python写一个俄罗斯方块
- 完整数据分析流程:Python中的Pandas如何解决业务问题
- 小试Python(一)