vue请求拦截统一给所有请求加loading-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue请求拦截统一给所有请求加loading。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：在项目开发过程中通常会给请求加loading，每次发请求单独加loading费事费力。
思路：用h5做手机端项目，业务简单，统一封装loading，由于vue组件化开发，通常是用ajax封装后的axios插件进行，在请求拦截里面可以加loading，接口返回拦截器里面关闭loading。
具体实现过程
1、每个接口的loading做成可配置化，如果模块的实际业务需要自己加loading，可以在请求方法中配不需要统一loading，hideloading属性。在请求拦截器，interceptors.request中如果不隐藏loading，就打开全局loading。
2、接口返回的拦截器，interceptors.response中关闭loading。
注意：由于h5手机端使用的是vant组件，loading和提示语都是轻提示，实现起来比较容易实现。
参看代码如下：

import axios from 'axios'
import { Toast, Dialog } from 'vant'

import router from '@/router'
import { Tips } from '@/utils/index'
import configs from "@/config";
// create an axios instance

const service = axios.create({
 baseURL: configs.HTTP_URL,
 withCredentials: true, // send cookies when cross-domain requests
 timeout: 50000 // 等待时间
})
console.log(configs)
// request拦截器 request interceptor
service.interceptors.request.use(
 config => {
   // 不传递默认开启loading
   if (!config.hideloading) {
     // loading
     Tips.loading(config.message)
   }
   if (localStorage.getItem('gy_h5_access_token')) {
     config.headers['access_token'] = localStorage.getItem('gy_h5_access_token')
   }

   config.headers['x-service-id'] = '123'

   return config
 },
 error => {
   // do something with request error
   console.log(error) // for debug

   return Promise.reject(error)
 }
)
// respone拦截器
service.interceptors.response.use(
 response => {
   Toast.clear()
   const res = response.data
   if (res.status && res.status !== 200) {
     Tips.error(res.msg)
     return Promise.reject(res || 'error')
   } else {
     if (res.code === 200) {
       return Promise.resolve(res.data)
     } else {
       Tips.error(res.msg)
       return Promise.reject(res || 'error')
     }
   }
 },
 error => {
   Toast.clear()
   if (error.response.status === 401) {
     Dialog({ message: '登录过期，请重新登录' }).then(() => {
       localStorage.removeItem('gy_h5_access_token')
       if (configs.otherUrl.ifsUrl) {
         window.location.href =  configs.otherUrl.ifsUrl + '/login'
       } else {
         router.replace({ name: 'NotFound' })
       }
     })
   } else {
     console.log(error,'error')
     Tips.error(error.response.data.message)
   }
   return Promise.reject(error)
 }
)
export default service