Совет: используйте Array.reduce для создания цепочки обратного вызова Promise.

внешний интерфейс JavaScript Promise axios

Студенты, изучающие интерфейс, обязательно столкнутся с несколькими асинхронными комбинированными сценариями, такими как необходимость ожидания нескольких запросов, которые будут возвращены вместе для обработки, или выдача нескольких запросов и получение только первого возвращаемого результата.Здесь мы можем использовать мощный API Promise:Promise.all,Promise.raceобрабатывать. Но что нам делать, когда нам нужно последовательно выполнить несколько асинхронных процессов?

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

    let urls = [
        'api.xxx.com/a',
        'api.xxx.com/b',
        'api.xxx.com/c',
        ...
    ]

В качестве общей практики мы будем делать это:

    await Axios.get(urls[0])
    await Axios.get(urls[1])
    await Axios.get(urls[2])
    ...

Если длина массива запроса известна, это можно сделать. Но если длина массива запроса неизвестна, мы должны позволить js построить цепочку обратного вызова Promise самостоятельно.

Первый взгляд на документ:Array.reduce

    reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
    
    arr.reduce([callback, initialValue])
    参数
        callback
            执行数组中每个值的函数，包含四个参数:
        previousValue
            上一次调用回调函数返回的值，或者是提供的初始值（initialValue）
        currentValue
            数组中当前被处理的元素
        currentIndex
            当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始.
        array
            调用 reduce 的数组
        initialValue
            可选参数, 作为第一次调用 callback 的第一个参数。
    返回值
        最后一次调用回调函数返回的结果

Array.reduceКаждый элемент массива может быть обработан, а обработанный результат передан в качестве параметра следующей функции обработки. Таким образом, мы можем создать промис в обратном вызове и передать его следующему обработчику.

    urls.reduce(async (previousValue, currentValue) => {
        await previousValue
        return Axios.get(currentValue)
    }, Promise.resolve())
    
    // 不用async
    urls.reduce((previousValue, currentValue) => {
        return previousValue.then(() => Axios.get(currentValue))
    }, Promise.resolve())

Поэтому мы используемArray.reduceСоздал цепочку обратного вызова Promise, похожую на:

    Promise.then(() => new Promise()).then(() => new Promise()).then(() => ...)

Конечно, функция-обработчик здесь — это просто пример Axios, подойдет любой метод, который возвращает промис. Точно так же мы можем использовать это для многих вещей, таких как бизнес-обработка и загрузка анимации. Больше причуд ждут вас.

Категории