javascript - 如何为 API 构建 JS 接口(interface)

Question

我正在 JS ES6 中构建一个 API 接口(interface)，以允许我以更好的方式和更高效地使用 CRUD 规则。我的问题是我找不到让它工作的方法。 我创建了我的界面来接受一些参数，并根据 GET 或 POST 等方法应该发生什么，我应该看到请求的特定结果。

我创建了一个外部 getProducts() 函数，但被系统忽略了我没有错误并且没有发生任何事情是死的。

我在获取数据接口(interface)中做了如下操作:

const api = "https://api";

const username = "username";
const password = "password";

const token = btoa(username + ":" + password);

window.request = async (url, params, method = "GET") => {
    const options = {
        method,
        headers: {
            "Content-Type": "application/json",
            Authorization: "Basic " + token
        }
    };

    if (params) {
        if (method === "GET") {
            url += "?" + objectToQueryString(params);
        } else {
            options.body = JSON.stringify(params);
        }
    }

    const response = await fetch(api + url, options);

    if (response.status !== 200) {
        return generateErrorResponse(
            "The server responded with an unexpected status."
        );
    }

    const result = await response.json();

    return result;
};

objectToQueryString = obj => {
    return Object.keys(obj)
        .map(key => key + "=" + obj[key])
        .join("&");
};

generateErrorResponse = message => {
    return {
        status: "error",
        message
    };
};

const Fetch  = () => {

    get = (url, params) => {
        return request(url, params);
    };

    create = (url, params) => {
        return request(url, params, "POST");
    };

    update = (url, params) => {
        return request(url, params, "PUT");
    };

    remove = (url, params) => {
        return request(url, params, "DELETE");
    };
};

获取数据的函数:

getProducts = async () => {
    const products = await Fetch.get("/product");
};

我很难理解哪里出了问题，我应该怎么做才能让它运行。

Answer 1

这是我使用假端点的尝试，一切正常

const api = "https://jsonplaceholder.typicode.com";

const username = "username";
const password = "password";

const token = btoa(username + ":" + password);

window.request = async (url, params, method = "GET") => {
    const options = {
        method,
        headers: {
            "Content-Type": "application/json",
            Authorization: "Basic " + token
        }
    };

    if (params) {
        if (method === "GET") {
            url += "?" + objectToQueryString(params);
        } else {
            options.body = JSON.stringify(params);
        }
    }

    const response = await fetch(api + url, options);

    if (response.status !== 200) {
        return generateErrorResponse(
            "The server responded with an unexpected status."
        );
    }

    const result = await response.json();

    return result;
};

objectToQueryString = obj => {
    return Object.keys(obj)
        .map(key => key + "=" + obj[key])
        .join("&");
};

generateErrorResponse = message => {
    return {
        status: "error",
        message
    };
};

const Fetch = {
    get: (url, params) => request(url, params),
    create: (url, params) => request(url, params, "POST"),
    update: (url, params) => request(url, params, "PUT"),
    remove: (url, params) => request(url, params, "DELETE")
};

const getProducts = async () => {
    const products = await Fetch.get("/posts");
    console.log(products);
};

getProducts();

首先，我将 Fetch 更改为具有方法的对象，而不是返回其他函数的函数:

const Fetch = {
    get: (url, params) => request(url, params),
    create: (url, params) => request(url, params, "POST"),
    update: (url, params) => request(url, params, "PUT"),
    remove: (url, params) => request(url, params, "DELETE")
};

我没有像其他人提到的那样使这些功能异步，因为它们不需要。 request 函数已经返回一个 promise，因为它是一个异步函数，所以 Fetch 函数也将返回一个 promise。

接下来，我将 get products 设为 const，因为它之前未定义。

const getProducts = async () => {
    const products = await Fetch.get("/posts");
    console.log(products);
};

我还将其 URL 更改为 posts 以匹配虚假端点，因此如果您复制和粘贴，请不要被它绊倒。

最后，我在获取产品函数中添加了一个console.log()。我不确定您是如何捕获 products 值的，但默认情况下 getProducts 函数会返回一个 promise ，因此必须异步处理它。

我也不确定你的 api url const api = "https://api"; 但那可能不会给你任何返回哈哈。

如果您想更仔细地查看我的版本，这里有一个 JSBin:https://jsbin.com/jokayikaro/edit?js,console