axios
一、axios概述
axios作用：发送异步请求获取数据。常见的方法：get、post、put、delete；在发送的时候可以指定参数(地址、请求方式和请求头部信息)；返回数据结构(data、status、statusText、headers、config)
二、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>
<!--引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
</head>
<body>
<div>
<button id="get">发送GET请求</button>
<button id="post">发送POST请求</button>
<button id="put">发送PUT请求</button>
<button id="delete">发送DELETE请求</button>
</div>
<script>
// GET请求--获取id为2的数据
const btn_get = document.getElementById("get");
btn_get.onclick = function() {
axios({
// 请求类型
method: 'GET',
// URL
url: 'http://localhost:3000/posts/2',
}).then(response => {
console.log(response);
})
}
// POST请求--增加一条数据，需要有请求体
const btn_post = document.getElementById("post");
btn_post.onclick = function() {
axios({
// 请求类型
method: 'POST',
// 请求的URL
url: 'http://localhost:3000/posts',
// 设置请求体
data: {
title: '今天天气不错',
author: 'admin'
}
}).then(response => {
console.log(response);
})
}
// PUT请求---更新id为3的数据
const btn_put = document.getElementById("put");
btn_put.onclick = function() {
axios({
// 请求类型
method: 'PUT',
// URL
url: 'http://localhost:3000/posts/1',
// 设置请求体
data: {
title: '今天天气不错-更新',
author: '李四-更新'
}
}).then(response=>{
console.log(response);
})
}
// DELETE请求---删除id为3的数据
const btn_delete = document.getElementById("delete");
btn_delete.onclick = function() {
axios({
method: 'delete',
url: 'http://localhost:3000/posts/1',
}).then(response => {
console.log(response);
})
}
</script>
</body>
</html>
三、axios其他方式发送请求(常用)
axios(config): 通用/最本质的发任意类型请求的方式axios(url[, config]): 可以只指定 url 发 get 请求axios.request(config): 等同于 axios(config)，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(): 用来指定接收所有成功数据的回调函数的方法
<!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>
<!-- 引入axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.js"></script>
</head>
<body>
<div>
<button id="get">发送GET请求</button>
<button id="post">发送POST请求</button>
<button id="put">发送PUT请求</button>
<button id="delete">发送DELETE请求</button>
</div>
<script>
// 获取按钮
const btn_get = document.getElementById("get");
// 给按钮绑定点击事件，发送get请求
btn_get.onclick = function() {
// axios.request(config)
axios.request({
method: 'GET',
url: 'http://localhost:3000/comments'
}).then(response =>{
console.log(response);
})
}
// 发送POST请求
const btn_post = document.getElementById("post");
btn_post.onclick = function() {
// axios.post()
axios.post(
'http://localhost:3000/comments',
{
"body": "喜大普奔",
"postId": 2
}
).then(response =>{
console.log(response);
})
}
</script>
</body>
</html>
四、axios请求响应结果的结构
{
// `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: {}
}
五、axios配置对象config(常用)
即axios在调用时，那个参数对象config。
这些是创建请求时可以用的配置选项。只有url时必须的。如果没有指定method，请求将默认使用get方法。
url
baseURL
method
data
六、axios的默认配置
<script>
// 获取按钮
const btn_get = document.getElementById("get");
// 设置默认的配置
axios.defaults.method = 'GET'; //设置默认的请求类型为GET
axios.defaults.baseURL = 'http://localhost:3000/'; //设置基础URL
// 给按钮绑定点击事件，发送get请求
btn_get.onclick = function() {
// axios.request(config)
axios.request({
url: 'comments'
}).then(response =>{
console.log(response);
})
}
</script>
官方文档：https://www.axios-http.cn/docs/req_config
原文地址：http://www.cnblogs.com/keyongkang/p/16888703.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
