Javascript ES8 асинхронный сервис ожидания + модули ES6

Javascript ES8 асинхронный сервис ожидания + модули ES6

Асинхронная выборка ES8 из разных модулей.

Щелкните здесь, чтобы опубликовать эту статью в LinkedIn »

Рекомендую ознакомиться с последними версиями ECMAScript или ECMA-262. Действительно хорошие ресурсы, которые мне помогли, можно найти здесь. У Джеффри Уэй есть отличная серия статей по ES2015 + для начинающих здесь.

Представьте, что у нас есть файл класса ES6, содержащий методы, которые все должны получать данные из разных источников?

(function () {
   'use strict';
}());
export default class someClass {
    constructor() {
        this.users = 'https://jsonplaceholder.typicode.com/users';
        this.posts ='https://jsonplaceholder.typicode.com/posts';
        this.getUsers();
        this.getPosts();
    }
    getUsers() {
        fetch(this.posts)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.log('Error:', error));
    }
    getPosts() {
        fetch(this.posts)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.log('Error:', error));
    }
}

Как вы можете видеть выше, getUsers () и getPosts () содержат практически ту же логику, что и запрос на выборку. Мы дублируем здесь код, и это можно обернуть в сахар ES8, как асинхронную функцию ожидания. Давайте начнем с изменения кода класса на что-то более лаконичное: -

(function () {
   'use strict';
}());
import { getData } from './GetDataHelper.js';
export default class someClass {
    constructor() {
        this.users = 'https://jsonplaceholder.typicode.com/users';
        this.posts ='https://jsonplaceholder.typicode.com/posts';
        this.getUsers();
        this.getPosts();
    }
    getUsers() {
        getData(this.users);
    }
    getPosts() {
        getData(this.posts);
    }
}

Теперь мы можем создать новый файл GetDataHelper.js: -

(function () {
   'use strict';
}());
// async function
export async function getData(url) {
    return await (await(fetch(url))).json();
}

Итак, теперь мы импортируем getData в класс как модуль. Этот модуль может содержать несколько методов, если мы хотим использовать больше методов в нашем классе, мы можем изменить импорт на: -

import { getData, someFunc, anotherFunc } from './GetDataHelper.js';

или все со звездочкой.

import { * } from './GetDataHelper.js';

Мы ждем обещания получить JSON, используя наш новый метод async в новом модуле. При необходимости это можно сделать более сложным, но, как видите, теперь он стал очень кратким и понятным. Все, что требуется, - это перекомпилировать код ES2015 + с помощью такого конвертера, как babel. Более сложный пример того, как мне нужно использовать асинхронную функцию ES8 с функциями локального хранилища HTML5, можно увидеть в моей последней работе.

Файл класса находится здесь.

Сервис кеширования (HTML5 - локальное хранилище здесь.

Сервис асинхронных запросов (помощник getData) находится здесь.