1. What is Axios?
Axios is a promise-based network request library that can be used in browsers and . It is a third-party plug-in and a third-party asynchronous request tool library.
Features of Axios:
- Can run in browsers and environments
- Based on promise, you can call promiseAPI
- The default sending is a get request, and the default post request sends a data format is JSON
- In addition to form format data, the JSON data format can be automatically converted to request data and response data.
- Can intercept requests and responses
2. Review Ajax
Features of Ajax:
- Asynchronous JavaScript and XML
- Can run in the browser, but not in the environment
- Request and response data require manual conversion of formats
- The request header also needs to be set manually
Ajax creation steps:
// 1. Create an XMLHttpRequest instance let xhr = new XMLHttpRequest()
// 2. Open a connection ('Request method get/post','Request Address')
// 3. Send a request // If necessary, set the request header format: JSON/application/x-www-form-urlencoded ()
// If necessary, you need to convert the request data format: (parameters)/(parameters) (Request parameters)
// 4. Receive response =function(){
// Decision: The request is completed and whether the request is successfully sent if(===4 && ===200){
// Receive response: If necessary, convert the format of the response data () ();
}
}
3. Review Promise
Promise is an asynchronous programming solution. The Promise constructor receives two parameters: resolve and reject. resolve as a successful callback function and reject as a failed callback function.
// 1. Create a promise object let p1=new Promise((resolve,reject)=>{
// resolve,reject is a callback function // The resolve function is the final state of the promise object is the successful state //The reject function is the final state of the promise object and the failure state
//Non-asynchronous //Assuming that the asynchronous operation is executed successfully, modify the promise object state to be successful state if(3>2){
resolve('success')
}else{
//Assuming that the asynchronous operation fails, modify the promise object state to fail state reject('error')
}
})
//How to provide resolve and reject functions //There are then and catch in the promise prototype // The method represents a callback after success, corresponding to resolution // The method represents a callback after failure, corresponding to reject ((res)=>{
(res,'Successful callback')
}).catch((error)=>{
(error,'Failed callback')
}).finally(()=>{
('Final execution')
})
//If two callback functions are passed in then, the first represents the callback after success, and the second represents the callback after failure, representing resolve() and reject() respectively, respectively ((res)=>{
(res,'success')
},(err)=>{
(res,'fail')
});
4. Vue encapsulation Axios
Axios is a promise-based HTTP library that can be used in browsers and in the browser. The ajax mechanism is also encapsulated in jQuery, but it is only applicable to browsers.
Functional Features:
- Available in both browsers and
- Automatically convert request data and response data formats to JSON data format
- Can intercept requests and responses
- Promise's API can be called
- axios sends requests by default in get mode, and the default data format is JSON format
Packaging steps:
Install axios:npm i -S axios create a folder that encapsulates axios and imports axios, and create axios API according to the project's needs:
import axios from "axios";
import Qs from 'qs';
let qs= Qs;
// Create an axios instance objectlet instance = ({
baseURL:"http://121.199.0.35:8888",
timeout:5000
});
// Request an interceptor(config=>{
if(!=='/user/login'){
='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.-3KA1HgjgshUZOqGbMWO5Rpr1yzMCAY';
}
return config
},error=>{
return (error)
});
// Response Interceptor ---Intercept the axios encapsulated response data(response=>{
let res=;
return res
},error=>{
return (error)
});
// Encapsulate get methodexport function get(url,params){
return (url,{
params,
})
}
//Encapsulate postJSON method json data format --Login interfaceexport function postJSON(url,data){
return (url,data);
}
// Encapsulate post method Form format dataexport function post(url,data){
return (url,(data))
}
export default instance
This is the end of this article about Axios encapsulation method in the vue project. For more related Axios vue encapsulation content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!