Vue非同期プラグイン---VueとPHPに基づいて前後端分離の汎用管理システムを構築する(四)

前編の紹介に従って、このプラグインを具体的に実現します.このプラグインの機能は次のとおりです.

は、統合されたリモートアクセスインターフェース

を提供する.

はフック(遮断器)を提供するチェーン流水線を実現し、略スライス

である.
まず、プラグインのフレームワークを定義します.

import $http from 'axios';
import Qs from 'qs';

/**
 *       
 *
 */
class Http {
  /**
   * @type {Vue}         Vue  
   */
  static vue;

  /**
   *       
   */
  static install(Vue) {
    this.vue = Vue;

    // this.vue.prototype.$httpGet
    // this.vue.prototype.$HttpPost

    // this.vue.prototype.$addReceiver

    // this.vue.prototype.$removeReceiver
  }

  /**
   *       
   * @typedef Receiver
   * @type {Function}
   * @param {Object} data
   */

  /**
   * @type {Receiver[]}       
   */
  static receivers = [];
}

export default Http;

これでフレームが組まれます.Httpクラスを定義し,Vueプラグインの要求に従って静的メソッドinstalを実現した.グローバルフック配列を定義し、フック関数のインタフェースを定義します.
次に記入します.全体的な考え方はAxoisリモートアクセスにより,返されるPromiseオブジェクトのthen関数で判断することである.データを返すと、フック配列に一度処理します.エラーを返すと、エラーメッセージが表示されます.もちろん、返されるPromiseのため、呼び出し元はthenチェーンを使用してデータを処理し続ける必要があります.具体的に実装後、次はMockタイムですので、お楽しみに.

import $http from 'axios';
import Qs from 'qs';

/**
 *       
 *
 */
class Http {
  /**
   * @type {Vue}         Vue  
   */
  static vue;

  /**
   *       
   * @typedef Receiver
   * @type {Function}
   * @param {Object} data
   */

  /**
   * @type {Receiver[]}       
   */
  static receivers = [];

  /**
   * Url      
   * @typedef UrlMaker
   * @type {Function}
   * @param {string} url
   * @returns {string}
   */

  /**
   * @type {UrlMaker}    Url      ，     Vue      Url        
   */
  static createUrl = url => url;

  /**
   *       
   * @param {Error} error     
   * @param {string} message     
   */
  static onError(error, message = '') {
    return this.vue.$message && this.vue.$message({
      type: 'warning',
      message: error.message || message,
    });
  }

  /**
   *     ,     GET  
   *
   * @param {string} value    
   * @param {Object} filter {key, value}      
   * @returns {Object}
   */
  static Filter = (value, filter) => {
    let realfilter = filter;
    if (filter === true) realfilter = 'id';
    if (typeof filter === 'string') realfilter = [{ key: filter, value: 'id' }];
    const fp = {};
    realfilter.forEach((v) => { fp[v.key] = value[v.value || v.key]; });
    return fp;
  }

  /**
   *          
   * @returns {Promise}
   */
  static HttpSend = (url, value = null, post = false) => {
    const option = {
      method: post ? 'post' : 'get',
      // url: this.createUrl(url),
      url,
    };
    if (post) {
      option.data = Qs.stringify(value);
      option.headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
    } else if (value !== null) {
      option.params = JSON.parse(JSON.stringify(value));
    }
    //     cookie
    option.withCredentials = true;
    option.paramsSerializer = params => Qs.stringify(params, { arrayFormat: 'brackets' });
    return $http(option).then((response) => {
      const data = response.data;
      //         
      if ((function isError(v) {
        if (typeof v !== 'object') return false;
        if (v.status === false) return true;
        return (v.status && Number(v.status) <= 0);
      })(data)) return Http.onError(data, '    ');
      return Http.onReceive(data);
    }, error => Http.onError(error, '      '))
      .catch(error => Http.onError(error, '    '));
  };

  /**
   *       
   * @type {Function}
   * @param {Object}  data
   * @returns {Object}
   */
  static onReceive = (data) => {
    Http.receivers.forEach(receiver => receiver(data));
    return data;
  }

  /**
   *       
   */
  static install(Vue) {
    this.vue = Vue;

    this.createUrl = this.vue.createUrl || (url => url);

    this.vue.prototype.$httpGet = (url, value = null) => this.HttpSend(url, value);
    this.vue.prototype.$HttpPost = (url, value = null) => this.HttpSend(url, value, true);

    this.vue.prototype.$addReceiver = receiver => this.receivers.push(receiver);

    this.vue.prototype.$removeReceiver = id => this.receivers.splice(id, 1);
  }
}

export default Http;