axios
Promise based HTTP client for the browser and node.js
Features
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Supports the Promise API
- Intercept request and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client side support for protecting against XSRF
Browser Support
安装 Axios Installing
Using npm:
|
Using bower:
|
Using cdn:
|
C:\Users\Administrator>npm install axios
+ [email protected]
updated 1 package and audited 2 packages in 1.754s
found 0 vulnerabilities
安装之后：
axios发起GET请求
axios发起get请求的语法:
axios.get('ur1',{params:{/*参数*/}}).then(callback)具体的请求示例如下:
//请求的URL地址
var url='http://www.liulongbin.top:3006/api/get'
//请求的参数对象
var paramsobj={name:'zs',age:20}
//调用axios.get()发起GET请求
axios.get(url,{params:paramsobj}).then(function(res){
//res.data 是服务器返回的数据
var result=res.data
console.log(res)
})
axios发起POST请求
axios发起post 请求的语法:
axios.post('ur1',{/*参数*/}).then(callback)具体的请求示例如下:
//请求的_URL，地址
var url='http://www.liulongbin.top:3006/api/post'
//要提交到服务器的数据
var data0bj={location:'北京',address:'顺义′}
//调用axios.post()发起POST请求
axios.post(url,dataobj).then(function(res){
//res.data是服务器返回的数据
var result=res.data
console.log(result)
})
完整示例 （来自 https://gitee.com/haha_2020/vue_material/blob/master/axios%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html）：
下面的例子不用安装axios也可以在浏览器里面正常运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>axios基本使用</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
</body>
</html>在浏览器里面开启调试工具。
运行结果如下：
例子
Performing a GET request
const axios = require('axios');
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}NOTE: async/await is part of ECMAScript 2017 and is not supported in Internet
Explorer and older browsers, so use with caution.
Performing a POST request
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});Performing multiple concurrent requests
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
REF
https://gitee.com/haha_2020/vue_material/blob/master/axios%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html
视频：
https://www.bilibili.com/video/BV1334y1d74f?p=120
https://www.bilibili.com/video/BV1334y1d74f?p=121
https://www.bilibili.com/video/BV1334y1d74f?p=122
https://www.bilibili.com/video/BV1334y1d74f?p=123