Axios
What is a axios?
Axios is a Promise-based HTTP library that can be used in browsers and Node.js.
Reference: axios Chinese document | axios Chinese | axios (axios-js.com)
In every project, we use AXIos to request interfaces, so axios is essential. Let’s take a look at Axios.
To use it, you have to install it
Install axios:
Install command: NPM install axios
Bower install: Bower install axios
In the project, after installing AXIos, we can go to the package.json file in the project to see if we installed Axios successfully:
This is our successful installation!
Then it’s time to create folders and files
File creation
Utils is a shared method that encapsulates axios, encapsulates cookies, and so on. Utils is a shared method that encapsulates axios, encapsulates cookies, etc
Under the utils file, we need to create a new HTTP.js js file, which is the file where we wrap axios(axios interceptor)! Axios interceptorAxios Chinese document | axios Chinese | axios (axios-js.com)
Configuration axios:
- We need to import our axios installation in our http.js file:
import axios from "axios"
Copy the code- Instantiate our AXIos using the default values of the configuration provided by the library to create an instance:
var instance = axios.create({
baseURL:""// This section writes the public proxy for the interface we use
timeout:2500// Request time, before the timeout, all requests will wait 2.5 seconds, due to network reasons, we can change the time longer
});
Copy the code- Add request interceptor:
//** The instance name in this section is the same as the instance name in the above section.
instance.interceptors.request.use(function (config) {
// What to do before sending the request
// If the interface you are using needs to configure headers or body request, you can modify the section to add it
//headers request header :config.headers[" headers "]=" headers "+ token value
return config;
}, function (error) {
// What to do about the request error
return Promise.reject(error);
});
Copy the code- Add response interceptor:
//** The instance name in this section is the same as the instance name in the above section.
instance.interceptors.response.use(function (response) {
// What to do with the response data
// Process the data, such as shinning
let {data} = response
returnThe data orreturn response.data;
}, function (error) {
// Do something about the response error
return Promise.reject(error);
});
Copy the codeNow that we have the basic axios functionality configured, we can also configure several request methods in our files that we often use, such as POST, GET, PUT, and delete. Post is the same as PUT. The DELETE method is the same as the GET method; you only need to change the method name.
Four request methods:
- Post method:
const post = (url,data) = >{
return new Promise((resolve,reject) = >{
// The instance name is the same as the variable name used to instantiate axios
instance.post(url,data).then(res= >{
resolve(res)
}).catch(err= >{
reject(err)
})
})
}
Copy the code- The put method:
const put = (url,data) = >{
return new Promise((resolve,reject) = >{
// The instance name is the same as the variable name used to instantiate axios
instance.put(url,data).then(res= >{
resolve(res)
}).catch(err= >{
reject(err)
})
})
}
Copy the code- The get method:
const get = (url,data) = >{
return new Promise((resolve,reject) = >{
// The instance name is the same as the variable name used to instantiate axios
instance.get(url,{params:data}).then(res= >{
resolve(res)
}).catch(err= >{
reject(err)
})
})
}
Copy the code- The delete method:
// This variable name cannot use delete directly, because delete is the keyword
const deleter = (url,data) = >{
return new Promise((resolve,reject) = >{
// The instance name is the same as the variable name used to instantiate axios
instance.delete(url,{params:data}).then(res= >{
resolve(res)
}).catch(err= >{
reject(err)
})
})
}
Copy the codeConclusion:
That’s what we need to configure in our AXIos file, roughly as follows:
import axios from "axios";
import { Message } from "element-ui";
import qs from "qs";
import { getCookie } from "./cookie";
// Create the instance using the default values of the configuration provided by the library
// The default value of the timeout configuration is 0
// Override library timeout default value
// Now all requests wait 2.5 seconds before timeout
const instance = axios.create({
baseURL: "/api".timeout: 250000});// Add request interceptor
instance.interceptors.request.use(
function (config) {
// What to do before sending the request
let token = getCookie("token");
config.headers["Authori-zation"] = "Bearer " + token;
return config;
},
function (error) {
// What to do about the request error
return Promise.reject(error); });// Add a response interceptor
instance.interceptors.response.use(
function (response) {
// What to do with the response data
if(response.data.status ! = =200) {
Message.error(response.data.msg);
}
return response.data;
},
function (error) {
// Do something about the response error
return Promise.reject(error); });const get = (url, data) = > {
return new Promise((resolve, reject) = > {
instance
.get(url, { params: data })
.then((res) = > {
resolve(res);
})
.catch((err) = > {
reject(err);
});
});
};
const deleter = (url, data) = > {
return new Promise((resolve, reject) = > {
instance
.delete(url, { params: data })
.then((res) = > {
resolve(res);
})
.catch((err) = > {
reject(err);
});
});
};
const post = (url, data) = > {
return new Promise((resolve, reject) = > {
instance
.post(url, data)
.then((res) = > {
resolve(res);
})
.catch((err) = > {
reject(err);
});
});
};
const put = (url, data) = > {
return new Promise((resolve, reject) = > {
instance
.put(url, data)
.then((res) = > {
resolve(res);
})
.catch((err) = > {
reject(err);
});
});
};
export { get, post, deleter, put };
Copy the codeImport {post,get,delete,put} from “@/utils/ HTTP “import {post,get,delete,put} from “@/utils/ HTTP”