Axios Element를 사용하여 전역 요청 로딩 방법 구현-JS 튜토리얼-php.cn

Axios Element를 사용하여 전역 요청 로딩 방법 구현

亚连

풀어 주다： 2018-05-30 10:46:19

원래의

2673명이 탐색했습니다.

이 글에서는 Axios Element를 사용하여 전역 요청 로딩을 구현하는 방법을 주로 소개하고 참고용으로 올려드립니다.

Background

비즈니스 요구 사항은 요청이 백엔드로 전송될 때마다 전체 화면 로딩이 트리거되고 여러 요청이 하나의 로딩으로 병합됩니다.

현재 프로젝트에서는 Vue, axios, element 등을 사용하고 있기 때문에 기사에서는 주로 axios와 element를 사용하여 이 기능을 구현하는 방법에 대해 설명합니다.

효과는 다음과 같습니다.

Analytic

먼저 요청이 시작되면 로딩이 시작되고, 요청이 반환되면 로딩이 종료됩니다. 요점은 요청과 응답을 가로채는 것입니다.

그러면 여러 요청을 하나의 로딩으로 병합해야 합니다.

마지막으로 요소의 로딩 구성 요소를 호출합니다.

요청 및 응답 차단

Axios의 기본적인 사용법은 자세히 설명하지 않습니다. 저자는 인스턴스를 생성하여 프로젝트에서 axios를 사용합니다.

// 创建axios实例
const $ = axios.create({
 baseURL: `${URL_PREFIX}`,
 timeout: 15000
})

로그인 후 복사

그런 다음 게시물 요청을 캡슐화합니다(게시물을 예로 사용).

export default {
 post: (url, data, config = { showLoading: true }) => $.post(url, data, config)
}

로그인 후 복사

axios는 요청 차단 및 응답 차단을 위한 인터페이스를 제공합니다. 각 요청에 대해 showFullScreenLoading 메서드가 호출되고 tryHideFullScreenLoading이 호출됩니다. () 메소드

// 请求拦截器
$.interceptors.request.use((config) => {
 showFullScreenLoading()
 return config
}, (error) => {
 return Promise.reject(error)
})

// 响应拦截器
$.interceptors.response.use((response) => {
 tryHideFullScreenLoading()
 return response
}, (error) => {
 return Promise.reject(error)
})

로그인 후 복사

그러면 showFullScreenLoading tryHideFullScreenLoading()이 하는 일은 요청을 동시에 병합하는 것입니다. needLoadingRequestCount 변수를 선언하고 매번 showFullScreenLoading 메서드 needLoadingRequestCount + 1을 호출합니다. tryHideFullScreenLoading() 메서드, needLoadingRequestCount - 1을 호출합니다. needLoadingRequestCount가 0이면 로딩이 종료됩니다.

let needLoadingRequestCount = 0

export function showFullScreenLoading() {
 if (needLoadingRequestCount === 0) {
  startLoading()
 }
 needLoadingRequestCount++
}

export function tryHideFullScreenLoading() {
 if (needLoadingRequestCount <= 0) return
 needLoadingRequestCount--
 if (needLoadingRequestCount === 0) {
  endLoading()
 }
}

로그인 후 복사

startLoading() 및 endLoading()은 요소의 로딩 메소드를 호출하는 것입니다.

import { Loading } from &#39;element-ui&#39;
let loading
function startLoading() {
 loading = Loading.service({
  lock: true,
  text: &#39;加载中……&#39;,
  background: &#39;rgba(0, 0, 0, 0.7)&#39;
 })
}

function endLoading() {
 loading.close()
}

로그인 후 복사

이제 기본 기능은 구현되었습니다. 게시물 요청이 전송될 때마다 전체 화면 로딩이 표시됩니다. 동시에 여러 요청이 하나의 로딩으로 합쳐지고, 모든 응답이 반환되면 로딩이 종료됩니다.

기능 강화

사실 현재 기능은 아직 조금 부족합니다. 특정 요청에 로드가 필요하지 않은 경우 요청을 보낼 때 showLoading: false 매개변수를 추가하면 됩니다. 요청 차단 및 응답 차단 중에 요청에 로드가 필요한지 확인합니다. 로드가 필요한 경우 showFullScreenLoading() 메서드를 호출합니다.

게시 요청을 캡슐화할 때 세 번째 매개변수에 구성 개체가 추가되었습니다. 구성에는 쇼로딩이 포함되어 있습니다. 그런 다음 인터셉터에서 별도로 처리하십시오.

// 请求拦截器
$.interceptors.request.use((config) => {
 if (config.showLoading) {
  showFullScreenLoading()
 }
 return config
})

// 响应拦截器
$.interceptors.response.use((response) => {
 if (response.config.showLoading) {
  tryHideFullScreenLoading()
 }
 return response
})

로그인 후 복사

Axios를 호출할 때 세 번째 매개변수에 config를 넣으면 Axios는 직접 사용할 수 있는 요청 인터셉터의 콜백 매개변수에 showloading을 직접 넣습니다. 응답 인터셉터의 콜백 매개변수 응답에 구성 키가 있습니다. 이 구성은 요청 인터셉터의 콜백 매개변수 구성과 동일합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.