前端二三事

Vue脚手架优化

2016-10-25  本文已影响171人  f275edb871f8

记录脚手架搭建之后一些优化,包括结构、代码、易用性

1 vue.js 引用组件方式优化

vue.js 引用组件需要先注册后使用,容易忘记。
优化思路: 可以提前全局引入

import * as components from 'components';
export default (function() {
  var DEF_DATA = {};
  return {
    data() {
      return {
        // loading:  false,
        // error:''
      }
    },
    components: components
})()

2 发送请求全局添加参数,响应全局监听错误

移动端每个请求都需要携带idbid userid之类的信息,这些信息是app登录这的基本信息,如果每次发请求都要加上这些参数是非常蛋疼的事情

globelConfig() {
        var self = this;
        // 全局http请求配置
        Vue.http.interceptors.push({
          request: function(request) {
            self.loading = true;
            request.params.dbid = self.user.eid
            request.params.openId = request.params.openId || self.user.openId
            // console.log(request)
            Object.assign(request.data, {
              dbid: self.user.eid,
              openId: request.data.openId || self.user.openId
            })
            return request;
          },
          response: function(response) {
            self.loading = false;
            if (!response.ok) {
              // 系统级别的错误
              self.error = response.statusText;
            } else {
              // 业务级别的错误
              var status = response.data.status
              var msg = response.data.msg
              switch (status) {
                case 200 : return response;
                default :
                  if (response.data.errcode === 0) {
                    // 云盘的接口这里不会返回200 ,反而是errcode
                    return response;
                  }
                  self.error = msg || '未知的系统错误';
                  break;
              }
            }
            return response;
          }
        });
      }
上一篇 下一篇

猜你喜欢

热点阅读