1 axios introduction
axios is a promise-based HTTP library that can be used in browsers and . It can provide the following services:
1. Create XMLHttpRequest from the browser (this object is the core of ajax (asynchronous request))
2. Create http request from
3. Support PromiseAPI
4. Intercept requests and responses
5. Convert request data and response data
6. Cancel the request
7. Automatically convert JSON data
8. Client supports XSRF defense
2 How to use
2.1 Install axios in React
npm install axios
2.2 get request
1. Initiate a get request without parameters:
// Method 1axios({methods: 'get', url: '/url'})
.then(res => { // Processing after the request is successful // res is the response data returned by the server }).catch(err => { // Processing after the request failed // err is the information after the request failed})
// Method 2("url")
.then(res => { // Processing after the request is successful // res is the response data returned by the server }).catch(err => { // Processing after the request failed // err is the information after the request failed})2. Initiate a get request with parameters: on the server sideGet request parametersWays —>. Parameter name
// Method 1("url", {params: {Parameter name: Parameter value}})
.then(res => {
})
.catch(err => {
})
// Method 2axios({
method: "get",
url: "url",
params: {
Parameter name: Parameter value
}
})
.then(res => {
})
.catch(err => {
})2.3 post request: send form data and file upload
1. Initiate a post request without parameters
// Method 1axios({
method: "post",
url: "url"
}).then(res => {
}).catch(err => {
})
// Method 2("url")
.then(res => {
}).catch(err => {
})
2. Initiate a post request with parameters: the way to obtain the request parameters on the server side —>. Parameter name
// Method 1axios({
method: "post",
url: "url",
data: {
Parameter name: Parameter value
}
}).then(res => {
}).catch(err => {
})
// Method 2("url", {Parameter name: Parameter value})
.then(res => {
}).catch(err => {
})
2.4 put request: update all data
1. Initiate a put request without parameters
// Method 1axios({
method: "put",
url: "url"
}).then(res => {
}).catch(err => {
})
// Method 2("url")
.then(res => {
}).catch(err => {
})
2. Initiate a put request with parameters: the way to obtain the request parameters on the server side —>. Parameter name
// Method 1axios({
method: "put",
url: "url",
data: {
Parameter name: Parameter value
}
}).then(res => {
}).catch(err => {
})
// Method 2("url", {Parameter name: Parameter value})
.then(res => {
}).catch(err => {
})
2.5 patch request: Only update the changed data
1. Initiate patch request without parameters
// Method 1axios({
method: "patch",
url: "url"
}).then(res => {
}).catch(err => {
})
// Method 2("url")
.then(res => {
}).catch(err => {
})
2. Initiate patch request with parameters: the way to obtain request parameters on the server side —>. Parameter name
// Method 1axios({
method: "patch",
url: "url",
data: {
Parameter name: Parameter value
}
}).then(res => {
}).catch(err => {
})
// Method 2("url", {Parameter name: Parameter value})
.then(res => {
}).catch(err => {
})
2.6 delete request: delete request (parameters can be placed on the url, or in the request body like post)
1. You can wrap the request parameters like get request: the way to get the request parameters on the server side —>. Parameter name
('url', {
params: {
Parameter name: Parameter value
}
}).then(res => {
}).catch(err => {
})
2. You can wrap the request parameters like post request: the way to get the request parameters on the server side —>. Parameter name
('url', {data: {Parameter name: Parameter value}})
.then(res => {
})
.catch(err => {
})
3 Axios' response structure
{
// `data` Response provided by the server data: {},
// `status` HTTP status code status: 200,
// `statusText` HTTP status information from the server response statusText: "OK",
// `headers` server response header headers: {},
// `config` is the configuration information provided for the request config: {}
}
Backstage:(result), sends data in json format, equivalent to:{ data: result }
front end:
For example, the background:
({
code: 1001,
msg: 'Orange cats won't be fat'
})
front end:
// 1001 // Can't orange cats be fat if they eat them
This is all about this article about the axios module in React. For more related React axios module content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!