快捷導(dǎo)航

vue3網(wǎng)絡(luò)請求添加loading過程

更新時(shí)間：2024年08月27日 14:35:27 作者：Time202051

這篇文章主要介紹了vue3網(wǎng)絡(luò)請求添加loading過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue3網(wǎng)絡(luò)請求添加loading

全局添加

import axios from 'axios'
import { ElLoading } from 'element-plus'

let loadingRequestCount = 0
let loadingInstance
const showLoading = () => {
  if (loadingRequestCount === 0) {
    loadingInstance = ElLoading.service({ target: '#app' })
  }
  loadingRequestCount += 1
}
const hideLoading = () => {
  if (loadingRequestCount <= 0) return
  loadingRequestCount -= 1
  if (loadingRequestCount === 0) {
    // nextTick(() => {
    loadingInstance.close()
    // })
  }
}

const service = axios.create({
  // baseURL: process.env.BASE_API,
  baseURL: 'http://localhost:4500',
  timeout: 3 * 1000
})

// 請求攔截器
service.interceptors.request.use(
  (config) => {
    showLoading()
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)
service.interceptors.response.use(
  (res) => {
    hideLoading()
  },
  (error) => {
    hideLoading()
  }
)
export default service

ElLoading.service({ target: ‘#app' })

target添加類名就是為某個(gè)類名添加loading。全局就是#app

局部添加

或者按鈕直接添加

let loadingInstance: any
// 添加loading
loadingInstance = ElLoading.service({ target: '.container_box' })
// 關(guān)閉laoding
loadingInstance.close()

vue優(yōu)化：添加請求loading效果

目標(biāo)：統(tǒng)一在每次請求后臺時(shí)，添加 loading 效果

背景：有時(shí)候因?yàn)榫W(wǎng)絡(luò)原因，一次請求的結(jié)果可能需要一段時(shí)間后才能回來，此時(shí)，需要給用戶添加 loading 提示。

添加 loading 提示的好處：

節(jié)流處理：防止用戶在一次請求還沒回來之前，多次進(jìn)行點(diǎn)擊，發(fā)送無效請求
友好提示：告知用戶，目前是在加載中，請耐心等待，用戶體驗(yàn)會更好

實(shí)操步驟

1.請求攔截器中，每次請求，打開 loading

// 自定義配置 - 請求/響應(yīng) 攔截器
// 添加請求攔截器
instance.interceptors.request.use(function (config) {
  // 在發(fā)送請求之前做些什么
  // 開啟loading，禁止背景點(diǎn)擊 (節(jié)流處理，防止多次無效觸發(fā))
  Toast.loading({
    message: '加載中...',
    forbidClick: true, // 禁止背景點(diǎn)擊
    loadingType: 'spinner', // 配置loading圖標(biāo)
    duration: 0 // 不會自動消失
  })

  // 只要有token，就在請求時(shí)攜帶，便于請求需要授權(quán)的接口
  const token = store.getters.token
  if (token) {
    config.headers['Access-Token'] = token
    config.headers.platform = 'H5'
  }

  return config
}, function (error) {
  // 對請求錯(cuò)誤做些什么
  return Promise.reject(error)
})

2.響應(yīng)攔截器中，每次響應(yīng)，關(guān)閉 loading
3.請求時(shí)，打開 loading

// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {
  // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
  // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么 (默認(rèn)axios會多包裝一層data，需要響應(yīng)攔截器中處理一下)
  const res = response.data
  if (res.status !== 200) {
    // 給錯(cuò)誤提示, Toast 默認(rèn)是單例模式，后面的 Toast調(diào)用了，會將前一個(gè) Toast 效果覆蓋
    // 同時(shí)只能存在一個(gè) Toast
    Toast(res.message)
    // 拋出一個(gè)錯(cuò)誤的promise
    return Promise.reject(res.message)
  } else {
    // 正確情況，直接走業(yè)務(wù)核心邏輯，清除loading效果
    Toast.clear()
  }
  return res
}, function (error) {
  // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
  // 對響應(yīng)錯(cuò)誤做點(diǎn)什么
  return Promise.reject(error)
})

如果需要多個(gè)Toast，則需要配置，但一般不用