service.interceptors.response.use(response => { const responseCode = response.status // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (responseCode === 200) { return Promise.resolve(response.data) } else { return Promise.reject(response) } }, error => { // 断网 或者 请求超时 状态 if (!error.response) { // 请求超时状态 if (error.message.includes('timeout')) { console.log('超时了') Message.error('请求超时，请检查网络是否连接正常') } else { // 可以展示断网组件 console.log('断网了') Message.error('请求失败，请检查网络是否已连接') } return } // 省略其它代码 ······ return Promise.reject(error) })
5.4 封装图片上传
// src/api/index.js export const uploadFile = formData => { const res = service.request({ method: 'post', url: '/upload', data: formData, headers: { 'Content-Type': 'multipart/form-data' } }) return res }
调用
async uploadFile (e) { const file = document.getElementById('file').files[0] const formdata = new FormData() formdata.append('file', file) await uploadFile(formdata) }
5.5 请求 显示 Loading 效果
let loading = null service.interceptors.request.use(config => { // 在请求先展示加载框 loading = Loading.service({ text: '正在加载中......' }) // 省略其它代码 ······ return config }, (error) => { return Promise.reject(error) }) service.interceptors.response.use(response => { // 请求响应后关闭加载框 if (loading) { loading.close() } // 省略其它代码 ······ }, error => { // 请求响应后关闭加载框 if (loading) { loading.close() } // 省略其它代码 ······ return Promise.reject(error) })
6. 巧用 Mixins
6.1 封装 store 公用方法
假设有这样一个场景，我们通过 vuex 封装了获取新闻列表的 function
import Vue from 'vue' import Vuex from 'vuex' import { getNewsList } from '../api/news' Vue.use(Vuex) const types = { NEWS_LIST: 'NEWS_LIST' } export default new Vuex.Store({ state: { [types.NEWS_LIST]: [] }, mutations: { [types.NEWS_LIST]: (state, res) => { state[types.NEWS_LIST] = res } }, actions: { [types.NEWS_LIST]: async ({ commit }, params) => { const res = await getNewsList(params) return commit(types.NEWS_LIST, res) } }, getters: { getNewsResponse (state) { return state[types.NEWS_LIST] } } })
然后在新闻列表页，我们通过 mapAction 、 mapGetters 来调用 Action 和 getters 我们需要写上这些代码
import { mapActions, mapGetters } from 'vuex' computed: { ...mapGetters(['getNewsResponse']) }, methods: { ...mapActions(['NEWS_LIST']) }
在假设，在另一个页面又需要重新调用获取新闻列表的接口，我们又要在写一遍上面的代码对吧？
复制粘贴就是干有木有？
如果接口突然加了一个参数，那岂不是每个要用到这个接口的代码都得加这个参数。
复制粘贴一时爽，需求一改你就爽
既然是重复的代码，我们肯定要复用，这时候 Vue 提供的 Mixin 就起了大作用了
封装 news-mixin.js 在 src 下创建一个 mixins 目录，用来管理所有的mixins 新建一个 news-mixin.js
import { mapActions, mapGetters } from 'vuex' export default { computed: { ...mapGetters(['getNewsResponse']) }, methods: { ...mapActions(['NEWS_LIST']) } }
然后在需要用到的组件中引入这个 mixin ，就能直接调用这个方法了。不管多少个页面，只要引入这个 mixin ，直接就能使用。
需求一改的话，也只需要修改这个 mixin 文件