vue-resource 二次封装

ajax.js

import Vue from 'vue';
import VueResource from 'vue-resource';

import utils from './utils';
import local from './local';
import toast from './toast';

Vue.use(VueResource);

// Usage
// https://github.com/vuejs/vue-resource/blob/master/docs/http.md
// https://github.com/vuejs/vue-resource/blob/master/docs/resource.md

Vue.config.devtools = NODE_ENV !== 'production';

export const BASE = utils.getParam('base_url');
export const API = utils.getParam('base_api');
export const URI_BASE = BASE + API;
export const URI_ERROR = BASE +'redirect.jsp';

let globalXHR = {},
goErrorPage = redirect => {
  if(redirect){
    window.location = URI_ERROR;
  }
};

class Ajax{
  constructor(opt = {}){
    this.path = opt.path || '';
    this.options = {
      url: URI_BASE + this.path,
      method: opt.method || 'get',
      data: opt.data || {},
      success: opt.success,
      fail: opt.fail,
      before: opt.beforeSend,
      complete: opt.complete,
      cache: opt.cache || false,
      emulateJSON: opt.emulateJSON || false,
      redirect: opt.redirect || false
    };
  }
  update(data = this.options.data){
    let self = this,
    options = self.options;
    options.data = data;
  }
  local(options = this.options){
    let self = this,
    path = self.path,
    method = options.method,
    ret = local.fetch(path +'|'+ method);
    console.log('Fetch cache of '+ path +'|'+ method + ': ', ret);
    return ret;
  }
  fetch(options = this.options){
    let self = this;
    if(options.cache){
      let data = self.local();
      if(data.data){
        self.handleSuccess(data);
      } else {
        self.http();
      }
    } else {
      self.http();
    }
  }
  http(options = this.options){
    let self = this,
    settings = {
      url: options.url,
      method: options.method,
      before(request){
        if(globalXHR[options.method]){
          globalXHR[options.method].cancel();
        }
        globalXHR[options.method] = request.xhr;
        // callback
        if(typeof options.beforeSend === 'function'){
          options.beforeSend(request);
        }
      }
    };
    if(options.method === 'get'){
      settings.params = options.data;
    } else {
      settings.body = options.data;
    }
    Vue.http(settings).then(
      function(response, status, request) {
        self.handleSuccess(response, options);
      },
      function(response, status, request) {
        toast.log([
          '路径 ',
          self.path,
          ' 出现错误: ',
          response,
          ' 请联系管理员或稍后重试。'
        ]);
        goErrorPage(options.redirect);
      }
    ).then(options.complete);
  }
  handleSuccess(response, options = this.options){
    var self = this;
    if(response.ok && response.data.rspHeader){
      if(response.data && response.data.rspHeader.rspCode === '000000'){
        goErrorPage(options.redirect && !response.data.data);
        if(typeof options.success === 'function'){
          options.success(response.data);
          local.save(response, self.path + '|' + options.method);
        }
      } else {
        if(typeof options.fail === 'function'){
          options.fail(response);
        }
        toast.log([
          '路径 ',
          self.path,
          ' 出现错误（',
          response.data.rspHeader.rspCode,
          '）：',
          response.data.rspHeader.rspMsg || '未知错误，请联系管理员或稍后重试',
          '。'
        ]);
        goErrorPage(options.redirect);
      }
    } else {
      if(typeof options.fail === 'function'){
        options.fail(response);
      }
      toast.log([
        '路径 ',
        self.path,
        ' 出现错误，请联系管理员或稍后重试。'
      ]);
      console.log(response);
      goErrorPage(options.redirect);
    }
  }
}

export default Ajax;