axios is a library focused on network requests. Different from jquery , it has complex functions. It can operate dom, do animation, and send ajax request. axios is a library focused on network requests.
1. Basic use
1. Import library files
After importing the axios library file in js, an axios method will be directly mounted globally and can be used directly.
<!-- 导入axios的库文件 -->
<script src="lib/axios.js"></script>
<script>
console.log(axios);
</script>
As you can see by printing axios on the console, it is a method that we can use directly now.
2. Basic Grammar
axios({
//请求方式，'GET'或者'POST'
method: 'GET',
//请求地址
url: ''
}).then(res => {
})
The result obtained by the axios method is a Promise object , and the test is as follows:
const res = axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks'
})
console.log(res);
Since it is a Promise object , you can get the result of the successful acquisition through .then .
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks'
}).then(res => console.log(res))
It can be seen that the acquisition was successful. This is an explanation of the basic syntax.
3. Result Analysis
However, is the result obtained by the axios method the result requested by the server? Let's use postman to test it.
Postman displays the return result obtained after the server request. We can see that the result obtained by axios is not the same. After comparison, we can find that the object result obtained by axios has a data attribute , and what is stored in it is the real return result of the server request.
At this point, we can get the relationship between the object result obtained by axios and the real return result requested by the server
: if you want to directly get the format of the real data, you only need res.data .
4. Parameter passing
[ Basic syntax ] Write the parameters of the GET method in params , and write the parameters of the POST method in data .
axios({
//请求方式，'GET'或者'POST'
method: 'GET',
//请求地址
url: '',
//url中的查询参数，GET方法的传参
params: {
},
//请求体参数，POST方法的传参
data: {
}
}).then(res => {
})
Get parameter passing demo:
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
params: {
id: 1
},
}).then(res => console.log(res))
Post parameter passing demo:
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: 'zs',
age: 20
},
}).then(res => console.log(res))
5. Method simplification
(1) Get the return value directly through async and await
Because the result obtained by the axios method is a Promise object , we can directly get the return value through async and await , instead of calling .then.
Bind a click event to the '#btnGet' button, and initiate an axios request after clicking. The return value can be obtained directly through async and await .
document.querySelector('#btnGet').addEventListener('click', async function () {
const res = await axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
// params: {
// id: 1
// }
})
console.log(res);
})
(2) Get the real data requested by the server by deconstructing and assigning
. We know from Section 3 that the object result obtained by axios is covered with a shell outside the real data requested by the server and stored in its data attribute. We can The real data requested by the server is obtained directly through object deconstruction .
document.querySelector('#btnGet').addEventListener('click', async function () {
const {
data} = await axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
})
console.log(data);
})
(3) The real data requested by the deconstruction assignment and renaming server has three attributes, data, status, and msg, among which data is what we care about most, and there are required data items. We only hope to get this data array, which is relatively simple , because the real data requested by the server has been obtained by the deconstruction assignment, and it exists in the data variable, so you only need to access the data attribute of this variable to get it, that is, data.data, but this is easy to confuse, so we are deconstructing When assigning a value, change the name of data to { data: res } .
document.querySelector('#btnGet').addEventListener('click', async function () {
const {
data: res } = await axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
})
console.log(res.data);
})
6. Axios directly initiates GET requests and POST requests
Basic syntax:
//axios直接发起GET请求
axios.get('url地址', {
//GET参数
params: {
}
})
//axios直接发起POST请求
axios.post('url地址', {
//POST参数 })
Example:
document.querySelector('#btnGet').addEventListener('click', async function () {
const {
data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
params: {
id: 1
}
})
console.log(res.data);
})
document.querySelector('#btnPost').addEventListener('click', async function () {
const {
data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', {
name: 'zs',
gender: '女'
})
console.log(res);
})