什么是 Proxy

通常，当谈到JavaScript语言时，我们讨论的是ES6尺度提供的新特征，本文也不破例。 我们将讨论JavaScript署理以及它们的作用，但在我们深入研究之前，我们先来看一下Proxy的界说是什么。

MDN上的界说是：署理工具是用于界说基本操作的自界说行为（例如，属性查找，赋值，枚举，函数挪用等）。

换句话说，我们可以说署理工具是我们的目的工具的包装器，我们可以在其中操作其属性并阻止对它的直接接见。 你可能会发现将它们应用到现实代码中很难题，我激励你仔细阅读这个看法，它可能会改变你的看法。

术语

handler：包罗陷阱（traps）的占位符工具。

traps：提供属性接见的方式。这类似于操作系统中捕捉器的看法。

target：署理虚拟化的工具。(由署理工具包装和操作的现实工具)

在本文中，我将为 get 和 set 陷阱 提供简朴的用例，思量到最后，我们将看到若何使用它们并包罗更庞大的功效，如API。

语法和用例

let p = new Proxy(target, handler);

将目的和处置程序传递给Proxy组织函数，这样就建立了一个proxy工具。现在，让我们看看若何利用它。为了更清楚地看出Proxy的利益，首先，我们需要编写一些没有它的代码。

想象一下，我们有一个带有几个属性的用户工具，若是属性存在，我们想要打印用户信息，若是不存在，则抛出异常。在不使用署理工具时，判断属性值是否存在的代码也放在了打印用户信息的函数，即 printUser 中(这并不是我们所希望的)，如下demo所示：

let user = {
    name: 'John',
    surname: 'Doe'
};

let printUser = (property) => {
    let value = user[property];
    if (!value) {
        throw new Error(`The property [${property}] does not exist`);
    } else {
        console.log(`The user ${property} is ${value}`);
    }
}

printUser('name'); // 输出: 'The user name is John'
printUser('email'); // 抛出错误: The property [email] does not exist

get

通过查看上面的代码，你会发现：将条件和异常移到其他地方，而printUser中仅关注显示用户信息的现实逻辑会更好。这是我们可以使用署理工具的地方，让我们更新一下这个例子。

let user = {
    name: 'John',
    surname: 'Doe'
};

let proxy = new Proxy(user, {
    get(target, property) {
        let value = target[property];
        if (!value) {
            throw new Error(`The property [${property}] does not exist`);
        }
        return value;
    }
});

let printUser = (property) => {
    console.log(`The user ${property} is ${proxy[property]}`);
};

printUser('name'); // 输出： 'The user name is John'
printUser('email'); // 抛出错误: The property [email] does not exist

在上面的示例中，我们包装了 user 工具，并设置了一个 get 方式。 此方式充当拦截器，在返回值之前，会首先对属性值举行检查，若是不存在，则抛出异常。

输出与之一种情形相同，但此时 printUser 函数专注于逻辑，只处置新闻。

set

署理可能有用的另一个例子是属性值验证。在这种情形下，我们需要使用 set 方式，并在其中举行验证。例如，当我们需要确保目的类型时，这是一个异常有用的钩子。我们来看一下现实使用：

let user = new Proxy({}, {
    set(target, property, value) {
        if (property === 'name' && Object.prototype.toString.call(value) !== '[object String]') { // 确保是 string 类型
            throw new Error(`The value for [${property}] must be a string`);
        };
        target[property] = value;
    }
});

user.name = 1; // 抛出错误: The value for [name] must be a string

这些是相当简朴的用例，以下场景，proxy均可以派上用场：

• 格式化
• 价值和类型修正
• 数据绑定
• 调试
• ...

现在是时刻建立一个更庞大的用例了。

具有署理的API - 更庞大的示例

通过使用简朴用例中的知识，我们可以建立一个API包装器，以便在我们的应用程序中使用。 当前只支持 get 和 post 请求，但它可以很容易地扩展。代码如下所示。

const api = new Proxy({}, {
    get(target, key, context) {
        return target[key] || ['get', 'post'].reduce((acc, key) => {
            acc[key] = (config, data) => {

                if (!config && !config.url || config.url === '') throw new Error('Url cannot be empty.');
                let isPost = key === 'post';

                if (isPost && !data) throw new Error('Please provide data in  *** ON format when using POST request.');

                config.headers = isPost ? Object.assign(config.headers || {}, { 'content-type': 'application/json;chartset=utf8' }) :
                    config.headers;

                return new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest();
                    xhr.open(key, config.url);
                    if (config.headers) {
                        Object.keys(config.headers).forEach((header) => {
                            xhr.setRequestHeader(header, config.headers[header]);
                        });
                    }
                    xhr.onload = () => (xhr.status === 200 ? resolve : reject)(xhr);
                    xhr.onerror = () => reject(xhr);
                    xhr.send(isPost ?  *** ON.stringify(data) : null);
                });
            };
            return acc;
        }, target)[key];
    },
    set() {
        throw new Error('API methods are readonly');
    },
    deleteProperty() {
        throw new Error('API methods cannot be deleted!');
    }
});

让我们解释一下简朴实现，set 和 deleteProperty。 我们添加了一个珍爱级别，并确保每当有人意外或无意地实验为任何API属性设置新值时，都市抛出异常。

每次实验删除属性时都市挪用 deleteProperty 方式。可以确保没有人可以从我们的署理(即此处的 api)中删除任何属性，由于通常我们都不想丢失API方式。

get 在这里很有趣，它做了几件事。target 是一个空工具，get 方式将在之一次有人使用 api 时建立所有方式(如当前的 get 和 post请求)，在 reduce 回调中，我们凭据提供的设置执行API规范所需的验证和检查。在此示例中，我们不允许空URL和公布请求而不提供数据。这些检查可以扩展和修改，但主要的是我们只能在这一个地方集中处置。

reduce 仅在之一次API挪用时完成，之后都市跳过整个 reduce 历程，get 只会执行默认行为并返回属性值，即API处置程序。每个处置程序返回一个Promise工具，卖力建立请求并挪用服务。

使用：  

api.get({
    url: 'my-url'
}).then((xhr) => {
    alert('Success');
}, (xhr) => {
    alert('Fail');
});

delete api.get; //throw new Error('API methods cannot be deleted!');

结论

当您需要对数据举行更多控制时，署理可以派上用场。你可以凭据受控规则扩展或拒绝对原始数据的接见，从而监视工具并确保准确行为。

翻译：刘小夕
原文链接：https://devinduct.com/blogpost/36/javascript-proxy-and-its-benefits-let-s-create-an-api-wrapper