Привязка "это" правильный путь в ES6

Question

Моя команда создает приложение React, и нам нужно промежуточное программное обеспечение / модуль javascript для управления вызовами наших (C #) API.

Существует множество API, и у каждого из них есть множество методов.

" Цель состоит в том, чтобы создать промежуточное программное обеспечение, обеспечивающее легкий доступ к каждому API "

Во избежание написания огромного файла JavaScript со всеми различными API и методамиЯ решил разбить код на разные файлы.

---

middlewear.js

export default config => {
    const middleware = { config };
    return Object.assign(middleware , getFileApi(middleware), getDocumentApi(middleware) /*, ... */);
}

Этот файл группирует каждый API вместе.

Идея состоит в том, чтобы вызватьэто выглядит так: middleware.fileAPi.getFile(123).

---

file-api.js

// getFileApi
export default middleware => ({
    getFile: getFile.bind(middleware),
    getFiles: getFiles.bind(middleware),
});

Этот файл возвращает Object , который содержит все методы из Файл API .

Чтобы использовать ключевое слово this в этих функциях, я связал каждую из них с middleware .

Мне нужноиспользуйте конфигурацию в корне промежуточного программного обеспечения .

---

getFile.js

export default async function(model) {
    // I need to use the `config` from "api.js" in here.
    let someCode = this.config.baseUrl + someOtherCode;
}

this относится к промежуточному программному обеспечению .Таким образом, я могу получить доступ ко всем этим свойствам, переданным в middleware .

---

Проблемы

• Я хотел бы переписать код вышеболее умным способом.
• Мне не нравится привязывать каждую функцию к промежуточному программному обеспечению таким образом, я бы хотел, чтобы она была более прозрачной, если это возможно.
• У меня довольно много меньших API -s.Это выглядит так:

export default config => {
    const api = { config };
    return 
        Object.assign(
            api, 
            getFileApi(api));
            getDocumentApi(api));
            getAudioApi(api));
            getSomeApi(api));
            getSomeOtherApi(api));
            getYetAnotherApi(api));
            getWoohooApi(api));
}

Спасибо!

---

РЕДАКТИРОВАТЬ

Я нашел способ исправить некоторые проблемы, но я не знаюесли это оптимально.

// Middleware 
// ================================================
export default {
  getFileApi: appConfig => getFileApi(buildConnect(appConfig))
};

// getFileApi 
// ================================================
export default (connect) => ({
    getFile: connect(getFile)
    getFiles: connect(getFiles)
});

// getFile 
// ================================================
export default (config) => async (data) => {
    const url = config.url;
    // return await ...;
}

// buildConnect
// ================================================
export default (appConfig) => {
    const initalConfig = { /* ... */ };
    const config = Object.assign({}, initalConfig, appConfig);
    return function(func) {
        return params => func(config)(params)
    }
}

// Usage (in react app)
// ================================================

import middleware from "...";
import appConfig from "...";

// usage
middleware
    .getFileApi(appConfig)
    .getFile(123)
    .then( /* ... */ )
    .catch( /* ... */ );

Я использую closure-scope для передачи конфигурации.

Ну, я не эксперт по Javascript, поэтому, возможно, яотсутствует более чистое решение ...

Answer 1

Похоже, что closure-scope лучше подойдет для вашей ситуации.

getFile.js

export default function(api) {
    return async (model) => {
        const someCode = api.config.baseUrl + someOtherCode;
    }
}

file-api.js

export default api => ({
    getFile: getFile(api),
    getFiles: getFiles(api),
});

Обратите внимание, что getFile возвращает новую функцию, которая обращается к переменной api вместо манипулирования контекстом с помощью bind.

Редактировать :

Я внес изменения в ваш последний пример, посмотрите, есть ли что-нибудь полезное.

// Middleware 
// ================================================
const connectionConfig = buildConnectConfig(appConfig);
export const Middleware = {
  fileApi: appConfig => getFileApi(connectionConfig)
};

// getFileApi 
// ================================================
export const getFileApi = (config) => ({
    getFile: getFile(config)
    getFiles: getFiles(config)
});

// getFile 
// ================================================
export const getFile = (config) => async (data) => {
    const url = config.url;
    // return await ...;
}

// buildConnect
// ================================================
export const buildConnectConfig = (appConfig) => {
    const initalConfig = { /* ... */ };

    return { // or Object.assign({}, ...)
        ...initalConfig, 
        ...appConfig
    };
}