Document description of axios: axios
Only part of and the encapsulation of axios are recorded here
catalog:
1,axios.create(config)
2. Request interception and response interception
3. Cancel interception
4. Practice of request interception and response interception
1. Create a new axios according to the specified configuration;
2. Why set create when axios() and axios.get() are directly used?
For example, there is a requirement that some interfaces in the project need to be configured differently from others. For example, a front-end application can send requests to multiple back-end applications, and baseUrl can be set differently according to create.
const instance = axios.create({
baseUrl: 'http://location:3000'
})
// request
instance({
url: '/getUser/xxx'
})
The request interceptor passes two functions. The successful function needs to return config, and the failed function returns Promise.reject(error)
The response interceptor passes two functions. The successful function needs to return response (result), and the failed function returns Promise.reject(error)
// Use request interceptor
axios.interceptors.request.use(config => {
return config // !!! Return to config configuration
}, error => {})
axios.interceptors.response.use(config => {
response => {
return response // !! Return data
},
error => {
// Request errors need to continue to be passed down
// throw error / / method 1
return Promise.reject(error) // Method 2
}
})
Multiple interceptors can be set if they are set in sequence
Interceptor sequence: request1, request2, response1, response2
Execution order: request2, request1, response1, response2
The request interceptor is added and executed first, and the response interceptor is added and executed first
(why? Source code analysis later)
Configuration process
1. Configure cancalToken object
2. Cache the cancel function used to cancel the request
3. The cancel function is actually called later to cancel the request
4. Judge in the error callback that if the error is cancel, respond
let cancel
// Send request
function getList(){
axios({
url: 'http://localhost:9999',
cancelToken: new axios.CancelToken(c => {
cancel = c // c is a function used to cancel the current request
})
}).then(response => {
// Regardless of success or failure, cancel must be set to blank. At this time, the cancellation request is invalid
cancel = null
consolg.log('Request 1 succeeded', response.data)
}, error => {
cancel = null
console.log('error', error)
})
}
// Cancel request
function cancelReq () {
// if (Object.prototype.toString.call(cancel) === "[object Function]")
if(typeof cancel === 'function') {
cancel() // The function that executes the cancel request
} else {
console.log('There are no requests to cancel')
}
}
Send a request to cancel the previous unfinished request
Idea: judge whether cancel is a function. If yes, cancel the request and continue to send the request 2!!! Whether the request succeeds or fails, set cancel to null
function getList(){
if (typeof cancel === 'function') {
Cancel('Cancel previous request')
}
axios({
url: 'http://localhost:9999',
cancelToken: new axios.CancelToken(c => {
cancel = c // c is a function used to cancel the current request
})
}).then(response => {
// Regardless of success or failure, cancel must be set to blank. At this time, the cancellation request is invalid
cancel = null
consolg.log('Request 1 succeeded', response.data)
}, error => {
cancel = null
console.log('error', error)
})
}
👆 There is a problem with this Code: click multiple times. The first request is cancelled, but the second request is not cancelled,
Reason: click send request 1, and the request of 1 will be sent immediately,
Click send request 2, and it is found that cancel is a function. Cancel will cause the error function of request 1 to execute asynchronously and be placed in the callback queue
Then send request 2. If cancel = null in the error of 1 at this time, it will cause 2 to set cancel to be empty again. Therefore, when you click the request again, you can't cancel the previous request
solve:
function getList(){
axios({
url: 'http://localhost:9999',
cancelToken: new axios.CancelToken(c => {
cancel = c
})
}).then(response => {
cancel = null
consolg.log('Request 1 succeeded', response.data)
}, error => {
//!! error may be of type cancel. If the request is cancelled, here is the message returned
if(axios.isCancel(error)) {
console.log('Cancellation request failed', error.message)
} else {
cancel = null
console.log('request was aborted', error.message)
}
})
}
That's all for the cancellation request
If you use the above code to send a request, you need to write a large amount of code similar to getList for each request – > request interception and response interception
let cancel
function getList1 () {
axios({
url: 'http://localhost:9999',
}).then(response => {
consolg.log('Request 1 succeeded', response.data)
}, error => {
console.log('request was aborted', error.message)
})
}
// Use request interceptor
axios.interceptors.request.use(config => {
if(typeof cancel === 'function') {
cancel() // The function that executes the cancel request
}
config.cancelToken = new axios.CancelToken(c => {
cancel = c // c is a function used to cancel the current request
})
return config
}, error => {})
axios.interceptors.response.use(config => {
response => {
cancel = null
return response
},
error => {
if(axios.isCancel(error)) { // Error canceling request
console.log('Cancellation request failed', error.message)
// Interrupt promise chain
return new Promise(() => {})
} else {
cancel = null
console.log('request was aborted', error.message)
// Request errors need to continue to be passed down
// throw error / / method 1
return Promise.reject(error) // Method 2
}
}
})
function cancelReq () {
// if (Object.prototype.toString.call(cancel) === "[object Function]")
if(typeof cancel === 'function') {
cancel() // The function that executes the cancel request
} else {
console.log('There are no requests to cancel')
}
}