Using Axios Element to implement global request loading method
This article mainly introduces the method of using Axios Element to implement global request loading. Now I share it with you and give it as a reference.
Background
The business requirement is like this. Whenever a request is sent to the backend, a full-screen loading is triggered, and multiple requests are merged into one loading.
The current project uses vue, axios, element, etc., so the article mainly talks about how to use axios and element to implement this function.
The effect is as follows:
Analysis
First, load starts when the request starts, and then End loading after the request returns. The point is to intercept requests and responses.
Then, multiple requests must be merged into one loading.
Finally, call the loading component of element.
Intercepting requests and responses
The basic usage of axios will not be described in detail. The author uses axios in the project by creating instances.
// 创建axios实例
const $ = axios.create({
baseURL: `${URL_PREFIX}`,
timeout: 15000
})Then encapsulate the post request (take post as an example)
export default {
post: (url, data, config = { showLoading: true }) => $.post(url, data, config)
}axios Provides interfaces for request interception and response interception. The showFullScreenLoading method will be called for each request, and the tryHideFullScreenLoading() method will be called for each response.
// 请求拦截器
$.interceptors.request.use((config) => {
showFullScreenLoading()
return config
}, (error) => {
return Promise.reject(error)
})
// 响应拦截器
$.interceptors.response.use((response) => {
tryHideFullScreenLoading()
return response
}, (error) => {
return Promise.reject(error)
})Then showFullScreenLoading tryHideFullScreenLoading( ) to do is to merge requests at the same time. Declare a variable needLoadingRequestCount, and call the showFullScreenLoading method needLoadingRequestCount 1 each time. Call tryHideFullScreenLoading() method, needLoadingRequestCount - 1. When needLoadingRequestCount is 0, loading ends.
let needLoadingRequestCount = 0
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}startLoading() and endLoading() are to call the loading method of element.
import { Loading } from 'element-ui'
let loading
function startLoading() {
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading() {
loading.close()
}At this point, the basic functions have been implemented. Every time a post request is sent, a full-screen loading will be displayed. Multiple requests at the same time are combined into one loading, and loading ends after all responses are returned.
Function enhancement
In fact, the current function is still a little bit worse. If a certain request does not require loading, then just add the showLoading: false parameter when sending the request. During request interception and response interception, determine whether the request requires loading. If loading is required, call the showFullScreenLoading() method.
When encapsulating the post request, the config object has been added to the third parameter. config includes showloading. Then handle them separately in the interceptor.
// 请求拦截器
$.interceptors.request.use((config) => {
if (config.showLoading) {
showFullScreenLoading()
}
return config
})
// 响应拦截器
$.interceptors.response.use((response) => {
if (response.config.showLoading) {
tryHideFullScreenLoading()
}
return response
})When we call axios, we put config in the third parameter. Axios will directly put showloading in the callback parameter of the request interceptor. You can Use directly. There is a config key in the callback parameter response in the response interceptor. This config is the same as the callback parameter config of the request interceptor.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Detailed explanation of Vue’s global introduction of bass.scss solution
js builds a binary tree to remove numerical arrays Detailed explanation of emphasis and optimization
Detailed explanation of red-black tree insertion and Javascript implementation method example
The above is the detailed content of Using Axios Element to implement global request loading method. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What should I do if 'Uncaught (in promise) Error: Request failed with status code 500' occurs when using axios in a Vue application?
Jun 24, 2023 pm 05:33 PM
It is very common to use axios in Vue applications. axios is a Promise-based HTTP client that can be used in browsers and Node.js. During the development process, the error message "Uncaught(inpromise)Error: Requestfailedwithstatuscode500" sometimes appears. For developers, this error message may be difficult to understand and solve. This article will explore this
Choice of data request in Vue: Axios or Fetch?
Jul 17, 2023 pm 06:30 PM
Choice of data request in Vue: AxiosorFetch? In Vue development, handling data requests is a very common task. Choosing which tool to use for data requests is a question that needs to be considered. In Vue, the two most common tools are Axios and Fetch. This article will compare the pros and cons of both tools and give some sample code to help you make your choice. Axios is a Promise-based HTTP client that works in browsers and Node.
How to modify element.style
Nov 24, 2023 am 11:15 AM
Methods for element.style to modify elements: 1. Modify the background color of the element; 2. Modify the font size of the element; 3. Modify the border style of the element; 4. Modify the font style of the element; 5. Modify the horizontal alignment of the element. Detailed introduction: 1. Modify the background color of the element, the syntax is "document.getElementById("myElement").style.backgroundColor = "red";"; 2. Modify the font size of the element, etc.
What should I do if 'TypeError: Failed to fetch' occurs when using axios in a Vue application?
Jun 24, 2023 pm 11:03 PM
Recently, during the development of Vue applications, I encountered a common problem: "TypeError: Failedtofetch" error message. This problem occurs when using axios to make HTTP requests and the backend server does not respond to the request correctly. This error message usually indicates that the request cannot reach the server, possibly due to network reasons or the server not responding. What should we do after this error message appears? Here are some workarounds: Check your network connection due to
How to solve the problem of 'Error: Network Error' when using axios in Vue application?
Jun 25, 2023 am 08:27 AM
How to solve the problem of "Error: NetworkError" when using axios in Vue application? In the development of Vue applications, we often use axios to make API requests or obtain data, but sometimes we encounter "Error: NetworkError" in axios requests. What should we do in this case? First of all, you need to understand what "Error:NetworkError" means. It usually means that the network connection
Efficiently utilize Vue and Axios to implement batch processing of front-end data
Jul 17, 2023 pm 10:43 PM
Efficiently utilize Vue and Axios to implement batch processing of front-end data. In front-end development, data processing is a common task. When we need to process a large amount of data, processing the data will become very cumbersome and inefficient if there is no effective method. Vue is an excellent front-end framework, and Axios is a popular network request library. They can work together to implement batch processing of front-end data. This article will introduce in detail how to efficiently use Vue and Axios for batch processing of data, and provide relevant code examples.
How to use vue3+ts+axios+pinia to achieve senseless refresh
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia realizes senseless refresh 1. First download aiXos and pinianpmipinia in the project--savenpminstallaxios--save2. Encapsulate axios request-----Download js-cookienpmiJS-cookie-s//Introduce aixosimporttype{AxiosRequestConfig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
What should I do if 'Error: timeout of xxxms exceeded' occurs when using axios in a Vue application?
Jun 24, 2023 pm 03:27 PM
What should I do if "Error: timeoutofxxxmsexceeded" occurs when using axios in a Vue application? With the rapid development of the Internet, front-end technology is constantly updated and iterated. As an excellent front-end framework, Vue has been welcomed by everyone in recent years. In Vue applications, we often need to use axios to make network requests, but sometimes the error "Error: timeoutofxxxmsexceeded" occurs.
