vue-cli3 项目从搭建优化到docker部署 (4)

在响应拦截中添加处理逻辑

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文件

// news/index.vue import Vue from 'vue' import newsMixin from '@/mixins/news-mixin' export default { name: 'news', mixins: [newsMixin], data () { return {} }, async created () { await this.NEWS_LIST() console.log(this.getNewsResponse) } } 6.2 扩展

除了封装 vuex 的公用方法，其实还有很多的东西也能做封装。例如：分页对象,表格数据,公用方法、等等就不一一举例了。可以看github

在多个地方经常使用，就可以考虑封装成mixin，不过请写好注释哦。不然就会有人在背后骂你了！！你懂的~~

7. 优化 7.1 gzip压缩

安装compression-webpack-plugin插件

npm install compression-webpack-plugin --save-dev // or yarn add compression-webpack-plugin --dev