Axios is a promise-based HTTP library that can be used in browsers and . There are 5 basic requests:
-
get: Mostly used to obtain data -
post: Used to add new data -
put: mostly used to modify data (all fields need to be passed, which is equivalent to all updates) -
patch: It is mostly used to modify data. It is added and improved on the basis of put. It is suitable for local updates. For example, I only want to modify the username, and only passing the fields of the username is OK, and there is no need to pass all fields over like put. -
delete: Mostly used to delete data
axios is actually similar to native ajax and $ajax in jquery, and is used to request data. However, axios is based on promises and is also a method recommended by vue.
So let’s take a look at the specific use in vue.
1. Download axios to the vue project npm
Here I will explain why qs is downloaded. The function of qs is to serialize request parameters, such as to convert object to string, string to object, don't underestimate it, it will be of great use later.
// npm download axios to the projectnpm install axios --save // npm download qs into the projectnpm install --save
2. Introduce
Remember the name defined when using axios here. I define axios, so I must use axios for subsequent requests. Of course, you can define other names, http, $axios, even your name doesn't matter. Pay attention to the specifications.
// Introduce axiosimport axios from 'axios' // Use axios = axios; // Introduce qsimport qs from 'qs' // Use qs = qs;
3. Define the global variable path (not necessary, but recommended)
(1) Method 1
Can be defined in
// On the right is the public part of each request address in your backend// * : The address is made up by me, and it involves privacy. You just need to raise the same public part of each requested address. = "http://127.0.0.1:9000/api";
(2) Method 2
Configure the same in config, use the variables of those two files in it
①: Local environment
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./')
= merge(prodEnv, {
NODE_ENV: '"development"',
// This is the request address for the local environment (please ignore the address and understand the principle) API_ROOT: ' "http://localhost:8080/web" '
})②: Online environment
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./')
= merge(prodEnv, {
NODE_ENV: '"development"',
// This is the request address for the local environment (please ignore the address and understand the principle) API_ROOT: ' "http://localhost:8080/web" '
})Use this path in ③
= .API_ROOT;
4. Use it in specific requirements
For example:
When I click on login on the login page, I need to request background data to determine whether the login can be verified, so as to determine whether the login can be logged in normally. I wrote the request method in methods. I clicked the @click event of vue. When I clicked the login button, I initiated the request, and then bound the username and password text box value through vue's v-model to obtain the value entered by the user to obtain the sending parameters
The variable I defined before was axios, so I used to initiate a request here, post is the request method, and I need to send the username and password as a string, so I need to serialize the parameters of qs (qs is not necessary, it can be matched according to the parameters you requested and the parameter format defined by the backend)
- .
thenIt is a callback function after the request is successful. The response contains the data of the backend response. You can print it. - .
catchIt is a capture after the request failed and is used to verify the error
login() {
(':8083/login/checkAdmin', ({
"username": ,
"password":
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
.then((response) => {
(response);
})
.catch((error) => {
(error);
});
}The above method can also be written like this:
login() {
({
method:"post",
url:":8083/login/checkAdmin",
data:({
"username": ,
"password":
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
.then((response) => {
(response);
})
.catch((error) => {
(error);
});
}Note: The parameters requested by get and delete are params (can be directly followed by the address in special cases), while the parameters of post, put, and patch are data
Let’s take a look at four specific request methods (ignoring the address, involving privacy, so I’ll lose a fake address):
Here ${} is the global path we defined earlier, as long as we follow the changed address.
The headers and qs here are not necessary, because our business needs to pass these data, so I wrote it. Everyone can only refer to the format.
Here are two ways of writing each request, which are different, so the specific request depends on the business requirements.
Put requests are used more frequently, and I rarely use patch myself, but the principles are the same, so I won't talk about it here
Use arrow functions to not change this pointing, so as to facilitate post-processing of data
（1）、get
({
method: "get",
url:`${}/GetAll`,
headers: {
Account: "Admin",
Password:"123456"
}
})
.then((response)=> {
(response)
})
.catch((error)=> {
(error);
});(':8083/solr/adminQuery', {
params: {
"page": 1,
"rows": 5
}
})
.then((response)=> {
(response)
})
.catch((error)=> {
(error);
});（2）、post
({
method:"post",
url:`${}/Create`,
headers: {
Account: "Admin",
Password:"123456"
},
data:({
Title: ,
Host: ,
Port: ,
Account: ,
Password: ,
DbName:
})
})
.then( (response)=> {
(response);
})
.catch(function (error) {
(error);
});login() {
(':8083/login/checkAdmin', ({
"username": ,
"password":
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
})
.then((response) => {
(response);
})
.catch((error) => {
(error);
});
}（3）、put
Like this request, I added a parameter behind the address bar, id, and this can be done as long as the backend format allows.
({
method:"put",
url:`${}/Update/`+([index].id),
headers: {
Account: "Admin",
Password:"123456"
},
data:({
Title: inputs[0].value,
Host: inputs[1].value,
Port: inputs[2].value,
Account: inputs[3].value,
Password: inputs[4].value,
DbName: inputs[5].value
})
})
.then( (response)=> {
(response);
})
.catch(function (error) {
(error);
});(':8083/Goods/update', {
"goodsId": goodsId,
"goodsName": goodsName,
"goodsPrice": goodsPrice,
"goodsNum": goodsNum,
"goodsKind": 1,
"goodsWeight": goodsWeight
})
.then((response)=> {
(response)
})
.catch((error)=> {
(error);
});（4）、delete
({
method:"delete",
url:`${}/Delete/`+([index].id),
headers: {
Account: "Admin",
Password:"123456"
}
})
.then((response)=> {
(error);
})
.catch((error)=> {
(error);
});(':8083/Goods/delete?goodsId=' + )
.then((response)=> {
(response)
})
.catch((error)=> {
(error);
});The above are the four commonly used restful style requests, all of which are requested by the bloggers themselves, and there is no problem, but the specific requests also depend on the specifications of the backend data format and some businesses. Only ideas are provided here. If there are any mistakes or no complete considerations, I would like to give you advice. I hope everyone supports me more.
Remember cross-domain issues and remember to let the backend handle them. If it is local, you can refer to the vue proxy.
Here is the official document of axios for your reference.Axios Chinese official document