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:
$ npm install axios
|
Using bower:
$ bower install axios
|
Using cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
C:\Users\Administrator>npm install axios + axios@0.24.0 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
http://www.axios-js.com/docs/
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