プロキシを使用は、すべてのインターフェイスの状態で待機します

演技は、私が解決するものです

開発プロセスでは、ほとんどすべてのインターフェイスは、結果を返します背景が通常であるように、モバイル端末での失敗や成功のような状態への復帰を、知っておく必要がありますが、我々はそれだけの結果をポップアップ表示するポップアップを必要としています。プロジェクト全体は、手動で各1を定義する必要がありました場合でも、このポップは、それがコードやメンテナンスの非常に大きな量が非常に面倒です。一般的な方法は、パブリックプロトタイプの方法は、そのようなthis.message（「背景リターンインタフェース情報」）にバインドされています。一見多くの努力が、それはまだ非常に面倒です。あなたはグローバルな機関を作るためにプロキシを使用する場合、それは完全に異なっています。かかわらず、任意の状態のプロキシ中心APIを通過すると、反応が中央機関から直接生じます。

import Vue from 'vue'
import {ToastPlugin} from 'vux'
import api from './api/api'
//引入封装好的api模块，和使用的toast弹出窗，弹窗可以选择任何框架的看起来比较好看的弹窗组件
Vue.use(ToastPlugin);
//toast初始化
let vm = new Vue();
//创建实例，是因为toast弹窗依赖它所以这里要创建个实例，去调用弹窗用
Vue.prototype.dilog = function (value) {
  vm.$vux.toast.show({
    text: value || "业务处理成功",
    type: 'text',
    width: "5rem",
    position: 'middle'
  });
};
//陷阱，只要接口状态改变就会调用此方法
var interceptor = {
  set: function (recObj, key, value) {
    vm.dilog(value);
    //弹出层，value就是api返回的状态值
    return this
  }
};
//创建代理以进行侦听
var proxyEngineer = new Proxy(api, interceptor);
Vue.prototype.api = proxyEngineer;
//将api替换为新的实例
复制代码

作成されたカプセル化されたAPIファイルが何の薬が大きな消費だろうVUEのAPIファイルに直接導入されていない場合は、VUEの例を紹介して行くべきではありませんので、その理由は、そうします。

class API {
  constructor(){
    this.massages = "业务处理成功!";
    //定义信息状态属性
    //当前接口错误提示
    this.code='000000'||'999999'
  }

  post(params, callback, dailog, errcallback = function () { //错误信息回调}) {
  //dailog 是是否需要在初始化弹窗，比如一个列表通常不需要加载完了弹出一个加载成功，或者获取数据成功什么的。Boolean，通常只需要在点击某事件时候使用，或者是初///始化数据报错使用 
  //this.code 代表状态码
    let config={};
    config.data = params.data||{};
    var url = `${base}${params.url}.do`;
    var dailog = dailog;
    //封装了axios的post方法
    return axios.post(url, config.data, config, dailog).then(res => {
      let rst = res.data;
      if (rst.code === '000000' || rst.code === '999999') {
        callback&&callback(rst.result||{});
        if (dailog) {
        //根据dailog 值来判断需不需要弹窗
          this.massages = rst.message;
        }
      }else{
        errcallback && errcallback();
        this.massages=rst.message;
        //监听massages的变化
      }
      //这里如果返回this返回的是代理对象的this
      return res
    }).catch(e => {
      console.log(e)
    })
  }

}
const api = new API();

export default api
//代码核心地方其实就是在类上定义了信息字段，通过massages值变化来反馈信息
复制代码

私が使ってトースト効果。

 this.api.post(params, res => {
     //你需要执行的逻辑
    // 再也不需要写什么
     //this.$msg(res.value) 这类的代码，代理已经都帮你处理完了
 })
 
复制代码

これは、私が実際のプロキシで使用したものであるにかかわらず、複数ページ内のメソッドまたは単一ページの適用されます。もちろん、少しラフなコードは、あまりにも多くの制限を行いますが、次のアイデアを言っていませんでした。あなたがあなた自身を忘れてしまった場合。
ちなみにプロキシの下でこの機能は、コンテンツを利用して、この本の「理解のECMAScript 6」を入れて、自分の理解に少しを追加するためにここにあります。記録のみ。

どのような薬や反射ですか？

新しいプロキシ（）を呼び出すことによって、あなたは（ターゲットと呼ばれる）別のオブジェクト、ターゲット仮想オブジェクトのプロキシを置き換えるために使用するプロキシを作成することができますので、オブジェクトのターゲット表面上のエージェントが同じオブジェクトとして扱うことができ、処理すべき。演技では、基盤となる元々JSエンジンの内部容量だったターゲットオブジェクト上で動作傍受することができます。応答関数に特定の操作を使用してハイジャック（トラップと呼ばれます）。より重要なインターセプターコンセプト。インターセプターは、いくつかの反射性界面を有する反映

実際には、特定のメソッドの傍受の役割は、組み込みのオブジェクトを書き換えることです。

シンプルエージェントを作成します

let target = {};
let proxy = new Proxy(target, {});
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
target.name = "target";
console.log(proxy.name); // "target"
console.log(target.name); // "target"
proxy拦截代理了target
复制代码

私は主に指すように使用します

let target = {
name: "target"
};
let proxy = new Proxy(target, {
set(trapTarget, key, value, receiver) {
// 忽略已有属性，避免影响它们
if (!trapTarget.hasOwnProperty(key)) {
if (isNaN(value)) {
throw new TypeError("Property must be a number.");
}
}
// 添加属性
return Reflect.set(trapTarget, key, value, receiver);
}
});
// 添加一个新属性
proxy.count = 1;
console.log(proxy.count); // 1
console.log(target.count); // 1
// 你可以为 name 赋一个非数值类型的值，因为该属性已经存在
proxy.name = "proxy";
console.log(proxy.name); // "proxy"
console.log(target.name); // "proxy"
// 抛出错误
proxy.anotherName = "proxy";
复制代码

さらにvue3.0応答は、式の薬剤の使用であります

ます。https：//juejin.im/post/5cf876e6f265da1ba647dc2fで再現