Introduction to axios
axios is an HTTP client based on Promise for browsers and nodejs, which itself has the following characteristics:
--------------------------------------------------------------------------------
•Create XMLHttpRequest from the browser
•Make http request from
•Support Promise API
• Intercept requests and responses
•Convert request and response data
•Cancel request
• Automatically convert JSON data
•Client support to prevent CSRF/XSRF
Install axios first
npm install axios
I won’t say much about the detailed introduction and usage of axios. Please move to github ➡️/axios/axios
Below is a simple encapsulation. Here we explain that checkStatus method is not necessary. According to personal project needs, you can also directly return the response and leave it to the later process.
Or it is OK to process it in it according to the status returned by the backend.
"use strict";
import axios from "axios";
import qs from "qs";
//Add a request interceptor(
config => {
return config;
},
error => {
return (error);
}
);
//Add a response interceptor(
response => {
return response;
},
error => {
return ();
}
);
= "/api";
["Content-Type"] = "application/json";
["X-Requested-With"] = "XMLHttpRequest";
= 10000;
function checkStatus(response) {
return new Promise((resolve, reject) => {
if (
response &&
( === 200 ||
=== 304 ||
=== 400)
) {
resolve();
} else {
reject({
state: "0",
message: "Network exception"
});
}
});
}
export default {
post(url, params) {
return axios({
method: "post",
url,
data: params
}).then(response => {
return checkStatus(response);
});
},
get(url, params) {
params = (params);
return axios({
method: "get",
url,
params
}).then(response => {
return checkStatus(response);
});
}
};
In the vue project, this file
import http from "./utils/http"; .$http = http;
use
...
methods: {
async TestPost() {
try {
const res = await this.$("/message/socketid", {
account: "huangenai"
});
(res);
} catch (error) {
(error);
}
},
async TestGet() {
this.$http
.get("/price")
.then(res => {
(res);
})
.catch(error => {
alert(error);
});
}
}
....
In the lieutenant, import is no longer needed in any vue page, but is used directly through this.$ this.$ , and returns uniformly asynchronously in checkStatus, and can handle errors by the way.
Personal thoughts:
The checkStatus method returns a Promise
For chain structure, see the get method above.this.$(...).then(...).catch(...)，If there is another http request in then, it will cover the next layer.
If you use syntax sugar async await , although it seems simple, you don’t need to wrap each layer and nest it layer by layer, but you must use try catch. If an exception occurs, you will go directly to catch and will not execute the following method. If in actual business, even if a certain http request fails, it will not affect the following logic and continue running, this will not apply. The chain structure is also the same if the catch is exception, the method will not be executed.
Therefore, whether all the returned Promises are returned is resolved, then it will not be said that the following business logic will not be executed in the catch. Moreover, if you use syntax sugar, the await code looks more concise and does not need to try catch. In this way, reject is not needed.
function checkStatus(response) {
return new Promise(resolve => {
if (
response &&
( === 200 ||
=== 304 ||
=== 400)
) {
resolve();
} else {
resolve({
state: "0",
message: "Network exception"
});
}
});
}
I personally think that these two solutions have their own advantages and disadvantages, and in actual application it should still be determined based on personal business needs and business conditions.