Фронтенд, вы действительно используете асинхронность?

Vue.js Promise

стратегия неполного использования асинхронной асинхронной функции

предисловие

Сейчас конец 8102, и технологическое развитие во всех аспектах интерфейса бесконечно.Конференция VueConf TO 2018 также обнародовала план для Vue 3.0. И в нашей (я) повседневной жизни мы часто используем Vue для написания некоторых проектов. Тогда ES6 незаменим. Опять же, вы действительно используете асинхронные асинхронные функции ES6?

1. Введение в асинхронность

Начнем с введения MDN:developer.Mozilla.org/this-cn/docs/…

async functionиспользуется для объявления возвратаAsyncFunctionАсинхронная функция объекта. Асинхронные функции — это функции, значения которых выполняются асинхронно через цикл обработки событий, который передается через неявныйPromiseвозвращает свой результат. Если в вашем коде используется асинхронная функция, ее синтаксис и структура больше похожи на стандартную синхронную функцию.

Человеческий перевод:asyncКлючевое слово используется, чтобы указать, что в функции есть асинхронная операция. Он возвращает результат, возвращая объект Promise.Его самая большая особенность в том, что он будет работать асинхронно через async/await, но метод и структура записи такие же, как то, что мы обычно пишем (синхронный код)

2. Демонстрация

// 一般我们会把所有请求方法都定义在一个文件里，这里定义一个方法来模拟我们的日常请求
function fetch() {
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
};
// 然后在需要它的地方调用它
async function getUserInfo() {
    const info = await fetch();

    return info;
}
getUserInfo().then(info => console.log(info));

Мы видим, что весь процесс очень интуитивно понятен и ясен, семантика операторов очень ясна, и вся асинхронная операция выглядит синхронной. Если после прочтения описанного выше процесса проблем не возникнет, мы продолжим более глубокое понимание.

3, асинхронное обещание setTimeout (таймер) используется в сочетании с делом

Далее я продемонстрирую вам тему. Этот вопрос - вопрос интервью, с которым я столкнулся в то время. По оценкам, я видел его со многими людьми. Этот вопрос очень классический и имеет много страниц сценариев использования. Исследование имеет большое значение, поэтому я здесь. Просто поделюсь этим с вами.

Найдите следующий вывод:
async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

Всего здесь 8 операторов журнала. Не копируйте их сначала в консоль. Дайте 20 секунд, чтобы перечислить порядок вывода.

1..2.. .. .. 20

Сначала я дам правильный ответ:

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

Если ваш ответ отличается от правильного ответа выше, это означает, что ваше понимание async/await недостаточно глубоко.Я надеюсь, что вы можете столкнуться с различными синхронными и асинхронными проблемами после прочтения моей статьи (хи-хи, это тоже Не дайте превью вверх)

Давайте рассмотрим описание MDN async/await:

при вызовеasyncфункция, она возвращаетPromiseобъект. когда этоasyncКогда функция возвращает значение,PromiseМетод разрешения отвечает за передачу этого значения; когдаasyncКогда функция выдает исключение,PromiseМетод reject также передаст это значение исключения.

asyncфункция может иметьawaitвыражение, которое делаетasyncФункция приостанавливает выполнение и ждетPromiseРезультат выходит потом восстанавливаетasyncФункция выполняется и возвращает разрешенное значение (разрешено).

async/awaitЦель состоит в том, чтобы упростить операцию использования промисов для асинхронного вызова иPromisesвыполнить какое-либо действие. так какPromisesПодобно структурированным обратным вызовам,async/awaitПодобно объединению генераторов и обещаний.

await

awaitоператор используется для ожиданияPromiseобъект. его можно использовать только в асинхронных функцияхasync functionиспользуется в.

[return_value] = await expression;

выражение ожидания приостановит текущийasync functionвыполнение, ожидая завершения промиса. Если обещание обрабатывается нормально (выполняется), параметр функции разрешения его обратного вызова используется в качестве значения выражения ожидания, и выполнение продолжается.async function.

Если обещание обрабатывает исключение (отклонено), выражение ожидания вызовет причину исключения обещания.

Кроме того, если значение выражения, следующего за оператором await, не является промисом, возвращается само значение.

Очень важным является:Когда встречается выражение ожидания, выполнение асинхронной функции будет приостановлено.После того, как состояние оператора (Promise) после изменения ожидания (разрешено или отклонено), выполнение асинхронной функции будет возобновлено (а затем оператор ниже await), и парсинг будет возвращен. value (значение промиса)

Так много контента, связанного с Promise, связано с тем, что async/await основан на Promise~~

Затем оглянитесь на нашу тему, и вы обнаружите, что что-то не так.

async1 end
promise2

Это потому, что точка Promise.resolve не считается, это моя точка в движении

4. Процесс анализа

  1. Определить асинхронную функцию async1
  2. Определить асинхронную функцию async2
  3. напечатать 'запуск скрипта' // *1
  4. Определите таймер (макрозадача, более низкий приоритет, чем микрозадача), вывод после 0 мс
  5. Выполнить асинхронную функцию async1
    1. напечатать 'асинхронный запуск 1' // *2
    2. Когда встречается выражение ожидания, выполните async2 после ожидания
      1. напечатать 'асинхронный2' // *3
    3. Возвращает обещание и выпрыгивает из тела функции async1
  6. Выполнить операторы в новом промисе
    1. напечатать 'обещание1' // *4
    2. resolve(), возвращает объект промиса и помещает этот промис в очередь
  7. напечатать 'конец скрипта' // *5
  8. Стек синхронизации выполняется
  9. Вернемся к телу функции async1. Функция async2 не вернула обещание, поэтому значение ожидания для async2 разрешается, и обещание помещается в очередь.
  10. Выполнить. Затем после нового промиса напечатать 'promise2' // *6
  11. Вернёмся к телу функции async1, await вернёт Promise.resolve(), а затем выведет следующий 'async1 end' // *7
  12. Наконец, выполните таймер (макрозадачу) setTimeout, выведите 'setTimeout' // *8

После того, как многие люди думают, что ждут, что ждут, чтобы выполнить выражение: существенно, как мой анализ процесса этого кода (если есть что-то неверное место, пожалуйста, понять указание), есть очень критично и легко понять все Неверно, когда последующие последующие реализация кода на самом деле выполняется первое выражение, ожидает обратно, а затем возвращает обещание, а затем они выпрыгивают из всей async-функции для выполнения кода, чтобы ждать выполнения, которое нужно сказать , там будетдать нитьоперация. После того, как последующая станция синхронизации будет выполнена, она вернется к асинхронной функции, чтобы дождаться возвращаемого значения выражения ожидания.Если это не объект Promise, будет процесс, ожидающий, что он станет объектом Promise, а затем продолжайте выполнять асинхронную функцию, код до тех пор, пока он не станет объектом Promise, затем поместите объект Promise в очередь Promise.

так ,’async1 end' 和‘promise2‘Это сложность совершать ошибки, если вы не обращаете внимания

Итак, теперь у нас есть общее понимание async/await?Давайте изменим этот вопрос и посмотрим на него еще раз, и преобразуем async2

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
function async2(){ // 去掉了 async 关键字
    console.log('async2');
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

Можете ли вы сделать это правильно на этот раз?

5. Ежедневные распространенные примеры

Столько всего было написано выше только для того, чтобы облегчить ваше понимание асинхронных функций.

Вот несколько примеров использования асинхронных функций в нашей повседневной разработке. Вообще говоря, у нас есть дело, которое нужно доделывать отдельно, каждый шаг асинхронный и сильно зависит от результата выполнения предыдущего шага, небольшая невнимательность приведет к callback hell, в этом случае мы можем сделать это с помощью async/ Ждите

// 比如在这里场景，我们提交数据的时候先判定用户是否有这个权限，然后再进行下一步动作
async function submitData(data) {
    const res = await getAuth(); // 获取授权状态
    if (res....) {
        const data = await submit(data);
    }
    toast(data.message);
}

Таким образом, порядок двух операций может быть гарантирован.

Или в Vue некоторые операции инициализации

async created() {
    const res = await this.init(); // 获取列表等操作
    const list = await this.getPage(); // 分页请求等
}

Но в процессе использования мы обнаружим, что нас только что спасли от ада callback, а потом попадем в рождение async/await hell

Например:

async created() {
    const userInfo = await this.getUserInfo(); // 获取用户数据
    const list = await this.getNewsList(); // 获取文章数据
}

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

Вот несколько распространенных примеров параллельного выполнения

async created() {
    const userInfo = this.getUserInfo(); // 它们都会返回 Promise 对象
    const list = this.getNewsList();
    await userInfo;
    await list;
    // ...do something
}
// 如果有很多请求的情况下可以使用 Promise.all
async created() {
    Promise.all([this.getUserInfo(), this.getNewsList()]).then(()=> {
        // ...do something
    });
}

5. Легенда

async 导图

6. Резюме

1. Идеальное решение для асинхронных

2. Асинхронные операции, которые выглядят как синхронные

3. Легко ловить ошибки и отлаживать

4. Поддержка одновременного выполнения

5. Избегайте асинхронного/ожидающего ада

7. Пишите в конце

Вот и все, что касается неполного руководства по асинхронным асинхронным функциям, содержание, упомянутое выше, может быть относительно простым. Рекомендуется, чтобы все использовали его умело.В ежедневном развитии больше использования и больше резюме будет иметь эффект осаждения.Все дело в том, чтобы практиковать самостоятельно, чтобы ознакомиться с использованием, и практика делает совершенным!

Наконец, если вы считаете, что я написал что-то неправильно или не очень хорошо, и у вас есть другие предложения (комплименты), вы можете их добавить. Я надеюсь, что мы сможем обмениваться мнениями, учиться друг у друга и добиваться прогресса вместе! Я 19-летний первокурсник, это сегодняшняя публикация, новичок в пути, а продолжение нерегулярно еженедельно (или ежемесячно, ха-ха), я буду стараться изо всех сил, чтобы стать лучше и писать лучшие статьи, статьи Если что-то не так, поправьте меня. Если вы считаете, что эта статья была вам полезна, не забудьте поставить лайк или оставить комментарий.

Категории