Axios使用方法-实现前后端交互
方法 实现 使用 交互 前后 Axios
2023-06-13 09:16:49 时间
什么是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分钟
相关文章
- 使用SpringBoot的@Async实现异步调用方法,以及自己开启新线程异步调用
- C#实现UI控件输出日志的方法案例分享
- 【Groovy】MOP 元对象协议与元编程 ( 使用 Groovy 元编程进行函数拦截 | 实现 GroovyInterceptable 接口 | 重写 invokeMethod 方法 )
- 教你如何使用Redis实现分布式锁的方法
- PostgreSQL中使用dblink实现跨库查询的方法
- 文件Linux 使用 SCP 实现远程文件传输的排除方法(linuxscp排除)
- MySQL操作:取得行数据的实现方法(mysql取行数据)
- 实现SQL Server数字转字符串的方法(sqlserver数字转字符串)
- 使用Redis Set实现高效排序:探究排序方法及优化策略(redisset排序)
- Redis 实现消息持久化机制的实践方法(redis消息持久化)
- MySQL中使用序列实现自增的方法(mysql序列自增)
- MySQL序列的实现和使用方法(mysql中使用序列)
- 利用简便方法实现Redis Key值的更新(更新redis key值)
- Oracle中使用父子值定义的实现方法(oracle中父子值定义)
- 使用MySQL实现一对多关系拼接方法(mysql 一对多 拼接)
- 实现两台MySQL数据库数据的同步的方法
- asp.net中Datalist使用数字分页的实现方法
- mysql下完整导出导入实现方法
- 在Linux中使用MD5实现用户验证的解决方法
- 使用HttpHead方法获取文件长度的实现方法详解
- 解析如何用两个栈来实现队列的方法
- 实现Nginx中使用PHP-FPM时记录PHP错误日志的配置方法
- Thinkphp搭建包括JS多语言的多语言项目实现方法
- C#省份城市下拉框联动简单实现方法
- Android实现字幕滚动的方法
- jQuery实现跟随鼠标运动图层效果的方法