vue 项目封装 axios 以及调用api自动全局loading、错误提示

前言

在项目中使用loading，一般是在js中改一个变量，或者调用一个service中的方法，比如Element Ui中就提供了这两种方式的loading，这样做有很好的扩展性。

BUT，如果你做一个后台管理项目，有一个api就要这样重复一下代码，emmm...我是接受不了，看我这个懒人是如何在vue项目中，把自动全局的loading封装到axios中的吧。

还有，就是我看很多朋友还在写这样的代码：

 /**
  * 本文简单设想，后端返回的是比较标准的code、data、message
  */
api.http('url' , data).then(res => {
    if (res.code === 200) {
        // 执行成功的操作
    } else {
        // 错误提示，当然这里只是举例，并非说真的alert，但是你每个请求都要写，多累啊！
        alert(res.message)
    }
})

准备工作

一个相对标准的vue项目，可以选择用vue-cli脚手架构建;
引入axios，理论上直接npm install axios;
建议在项目的src目录下创建一个utils目录，可以分文件去写一些filter、公共方法等...;
在utils目录下创建http.js（想怎么命名都可以，有意思就行，你们随意~）

OK，接下来就要在http.js中封装一下axios.

封装 axios

这里话不多说，直接上代码了

import axios from 'axios'
import store from '../store' // 这里做loading会调用store
import { getToken } from '@/utils/auth' // 这个不重要，就是一个获取tooken的

// 创建axios实例
const service = axios.create({
  // api的base_url，本地配置的代理，理论上可以不用baseURL
  // baseURL: process.env.BASE_API, 
  timeout: 15000, // 请求超时时间
  // headers 可以通过在这里设置，也可以在request拦截器里创建
  // headers: {'X-Custom-Header': 'foobar'}
})

// request拦截器
service.interceptors.request.use(config => {

  // !!! 这里开始触发 loading 效果 !!!   
  store.dispatch('SetLoading', true)
  
  // 设置 token header
  getToken() && (config.headers['token'] = token)
  
  // 这个是微信登录中需要用到 header
  config.headers['deviceType'] = 'school_admin_web' 
  return config
},
error => {
  const { response } = error
  // 这里可以根据自己的业务做一些操作，比如说全局提示

  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    // !!! 关闭 loading !!! 
    store.dispatch('SetLoading', false)
    
    const res = response.data
    if (res.code !== 200) {
      // 这里可以做一些全局性的错误提示，这样就没必要在每个请求都再写一个else,再重复代码提示
      alert(res.message)
      // 不是真的alert啊
    }
    return response.data
  },
  error => {
    // !!! 关闭 loading !!! 
    store.dispatch('SetLoading', false)
    
    const { response } = error
    // 这里可以根据自己的业务做一些操作，比如说强制登出
    
    return Promise.reject(error)
  }
)

export default service

好了，可以看到，其实全局的错误提示，在上面的代码中有直接的体现了，这里就不多讲了，那全局的loading的话，这里其实调用了store里的SetLoading。

如果您还没用过store，请自行学习文档，这里不做store的详细讲解。

使用 store 控制 loading 状态

这里，假想您已经熟悉store并使用store的模块化（当然，不模块化也无所谓，看你自己）。假设store目录下有个 app module对应的是app.js，好了，上代码：

const app = {
  state: {
    requestLoading: 0,
  },
  mutations: {
    SET_LOADING: (state, boolean) => {
      boolean ? ++state.requestLoading : --state.requestLoading
    },
  },
  actions: {
    SetLoading ({ commit }, boolean) {
      commit('SET_LOADING', boolean)
    },
  },
}

export default app

结合对axios的封装代码可以看到，在axios中request拦截器中，我调用了store SetLoading，改变了requestLoading的数值，使其自加1；在response拦截器中，我同样调用了store SetLoading，改变requestLoading的数值，使其自减1。其整体原理，类似于垃圾回收机制，这样做的好处是，有多个请求并发时，只有所有的请求都返回结果后，loading效果才会消失。

那么，现在焦点只处于store下app模块的requestLoading状态，我们拿这个判断loading效果即可。

那么，剩余的代码，这里就不多说了，

大抵是你在你的布局层里，定位一个阴影层的loading，通过requestLoading的状态，来判断显示隐藏（类似于这样）。

<template>
  <section class="app-main">
    <div class="request-loading" :class="{'request-loading-show' : requestLoading}">
      <div class="loading-module"></div>
    </div>
    <transition name="fade-transform" mode="out-in">
      <router-view/>
    </transition>
  </section>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  name: 'AppMain',
  computed: {
    ...mapGetters([
      'requestLoading',
    ]),
  },
}
</script>
// .request-loading-show样式代码这里就不写了，自己根据需要弄一下吧。

最终使用

这里也不用多说了，就是把第二部封装好的axios import 使用就OK，这里建议在src下创建api目录，来模块定义所有的api，比如：

import http from '@/utils/http'

export default {
  add (data) {
    return http({ url: '...', data: data, method: 'post' })
  },
}
// 然后在组件里正常调用即可...

总结

通过以上的操作，有两个好处，请求期间会自动显示loading效果；当有错误时，全局已经做好了提示。

懒，即行为懒，并不代表思维懒；

懒得行为，才会推动思维去成就懒...

如果有写的不对的地方，欢迎提出~

如果您有更好的建议，欢迎留言沟通~