Обещания в JavaScript

JavaScript

Вы когда-нибудь встречали в JavaScriptpromisesа интересно какие они? почему их зовутpromisesШерстяная ткань? Связаны ли они каким-либо образом с обязательствами, которые вы даете другому человеку?

Кроме того, зачем вам использоватьpromisesШерстяная ткань? Каковы их преимущества на традиционном JavaScript Action Changebacks?

В этой статье вы узнаете в JavaScriptpromisesвсего контента. Вы поймете, что это такое, как их использовать и почему они более популярны, чем обратные вызовы.

Итак, что обещаю это?

promise是一个将来会返回值的对象。 Из-за этого未来вещи,Promises

JavaScript лучше разбирать по аналогииpromiseпонятие, поэтому давайте сделаем это (по аналогии), чтобы сделать понятие более ясным.

Представьте себе на следующей неделе, чтобы подготовить вечеринку по случаю дня рождения для вашей племянницы. Когда вы говорите о партии, твой друг, Джефф, заставил его помочь. Ваше сердце очень высокое, поэтому он купил черный лес (стиль) днем ​​рождения торт. Джефф сказал, что мог.

Здесь Джефф говорит вам, что купит вам торт ко дню рождения «Шварцвальд». Это согласовано. В JavaScript,promiseРаботает так же, как обещает в реальной жизни. Версия сцены на JavaScript может быть написана с использованием:

// jeffBuysCake is a promise
const promise = jeffBuysCake('black forest')

вы научитесь строитьjeffBuysCake. Теперь подумайте об этом как оpromise.

Прямо сейчас Джефф еще не действовать. В JavaScript мы говорим, что обещания等待中（pending）. если тыconsole.logОдинpromiseобъект, вы можете убедиться в этом.

pending

РаспечататьjeffBuysCakeУказывает, что обещание находится на рассмотрении.

когда мы построим вместе позжеjeffBuysCakeКогда вы можете доказать это самостоятельноconsole.logутверждение.

После разговора с Джеффом вы начинаете планировать следующий шаг. Вы понимаете, что если Джефф продолжал свое обещание, и купил черный лесной торт на вечеринке, вы можете продолжаться как планируемую вечеринку.

Если Джефф покупает торт, в JavaScript мы говорим, что это обещание实现(resolved). Когда обещание сбудется, вы.thenСделайте следующее в вызове:

jeffBuysCake('black forest')
  .then(partyAsPlanned) // Woohoo! 🎉🎉🎉

拒绝(rejected).

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

jeffBuysCake('black forest')
  .then(partyAsPlanned)
  .catch(buyCakeYourself) // Grumble Grumble... #*$%

Мой друг, это дляPromiseАнализы.

promisesполучить или изменить часть информации. когдаpromiseКогда вы получите решение, мы выполним некоторые операции с возвращенными данными. когдаpromiseПри отклонении мы обрабатываем ошибку:

getSomethingWithPromise()
  .then(data => {/* do something with data */})
  .catch(err => {/* handle the error */})

Теперь вы знаетеpromiseКак это работает. Давайте углубимся в то, как построитьpromise.

построить обещание

вы можете использоватьnew Promise来创建一个promise。 этоPromiseКонструктор - это два параметра -resolveа такжеrejectФункция.

const promise = new Promise((resolve, reject) => {
  /* Do something here */
})

еслиresolveвызывается, обещание успешно выполняется и продолжается вthenцепные (операции). вы переходите кresolveПараметры будут следующимиthen

const promise = new Promise((resolve, reject) => {
  // Note: only 1 param allowed
  return resolve(27)
})

// Parameter passed resolve would be the arguments passed into then.
promise.then(number => console.log(number)) // 27

еслиrejectназывается, обещание терпит неудачу и продолжается вcatchцепные (операции). Точно так же вы проходите егоrejectАргумент будетcatch

const promise = new Promise((resolve, reject) => {
  // Note: only 1 param allowed
  return reject('💩💩💩')
})

// Parameter passed into reject would be the arguments passed into catch.
promise.catch(err => console.log(err)) // 💩💩💩

Видишьresolveа такжеreject都是回调函数吗？ 😉

Позвольте нам практиковать, попробуйте построитьjeffBuysCakeобещать.

Во-первых, ты же знаешь, что Джефф сказал, что купит торт. Это обещание. Итак, начнем с пустого обещания:

const jeffBuysCake = cakeType => {
  return new Promise((resolve, reject) => {
    // Do something here
  })
}

Затем Джефф сказал, что купит торт через неделю. давайте использоватьsetTimeoutФункция имитирует это ожидание в течение семи дней. Вместо семи дней подождем секунду:

const jeffBuysCake = cakeType => {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      // Checks if Jeff buys a black forest cake
    }, 1000)
  })
}

Если Джефф через секунду купит торт «Черный лес», мы возвращаем обещание и передаем торт «Черный лес»then.

Если Джефф покупает другой вид торта, мы отказываемся от обещания и говорим:no cakeЭто приведет к обещаниюcatchпередача.

const jeffBuysCake = cakeType => {
  return new Promise((resolve, reject) => {
    setTimeout(()=> {
      if (cakeType
 - = 'black forest') {
        resolve('black forest cake!')
      } else {
        reject('No cake 😢')
      }
    }, 1000)
  })
}

Давайте проверим это обещание. когда ты внизуconsole.logПри регистрации вы увидите, что обещание выполняетсяpedding(等待). (Если вы немедленно проверяете консоль, статус будет временно приостановлен только. Если вам нужно больше времени, чтобы проверить консоль, не стесняйтесь увеличить тайм-аут до 10 секунд).

const promise = jeffBuysCake('black forest')
console.log(promise)

pending

РаспечататьjeffBuysCakeУказывает, что обещание находится на рассмотрении.

Если вы добавите в цепочку обещанийthenа такжеcatch,ты увидишьblack forest cake!илиno cake 😢jeffBuysCake

const promise = jeffBuysCake('black forest')
  .then(cake => console.log(cake))
  .catch(nocake => console.log(nocake))

hascake

Информация, которая распечатывается: «Торт Шварцвальд» или «Нет торта», в зависимости от того, что вы передаете.jeffBuysCake(параметр).

Создать обещание не сложно, не так ли? 😉

Теперь, когда вы знаете, что такое обещание, как сделать обещание и как использовать обещание. Ну давайте ответимСледующий вопрос-- Зачем использовать обещания вместо обратных вызовов в асинхронном JavaScript?

Promises vs Callbacks

Разработчики предпочитают обещания обратным вызовам по трем причинам:

  1. Обещания уменьшают количество вложенного кода
  2. Промисы позволяют легко визуализировать поток выполнения
  3. Промисы позволяют обрабатывать все ошибки в конце цепочки

Чтобы увидеть эти три преимущества, давайте напишем код JavaScript, который передаетcallbacksа такжеpromisesсделать что-то асинхронное.

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

  1. выставлять счета клиентам
  2. Внесение информации о клиенте в базу данных
  3. Отправить письмо клиентам

Давайте решим это шаг за шагом. Во-первых, вам нужен способ получить информацию с переднего конца до конца. Как правило, вы бы использовали эти операцииpostпросить.

если вы используетеExpressилиNode, код инициализации может выглядеть так. если вы ничего не знаетеNodeилиExpress（的知识点），请不要担心。它们不是本文的主要部分。 Выполните следующие действия:

// A little bit of NodeJS here. This is how you'll get data from the frontend through your API.
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  // Charge customer here
})

Давайте сначала представимcallbackкод.在这里，你想要向客户收费。如果收费成功，则将其信息添加到数据库中。如果收费失败，则会抛出错误，因此你的服务器可以处理错误。

Код выглядит следующим образом:

// Callback based code
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  // First operation: charge the customer
  chargeCustomer(customer, (err, charge) => {
    if (err) throw err

    // Add to database here
  })
})

promiseкод.同样地，你向客户收费。如果收费成功，则通过调用thencatchАвтоматическая обработка в звонке:

// Promised based code
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  // First operation: charge the customer
  chargeCustomer(customer)
    .then(/* Add to database */)
    .catch(err => console.log(err))
})

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

Принимая во внимание эти шаги, исходя изcallbackКод выглядит следующим образом:

// Callback based code
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  chargeCustomer(customer, (err, charge) => {
    if (err) throw err

    // Second operation: Add to database
    addToDatabase(customer, (err, document) => {
      if (err) throw err

      // Send email here
    })
  })
})

на основеpromiseкод, если операция с базой данных прошла успешно, в следующемthencatchОшибки обрабатываются автоматически в операторе:

// Promised based code
app.post('/buy-thing', (req, res) => {
  const customer = req.body

  chargeCustomer(customer)
    // Second operation: Add to database
    .then(_ => addToDatabase(customer))
    .then(/* Send email */)
    .catch(err => console.log(err))
})

Перейдите к последнему шагу, чтобы отправить электронное письмо клиенту, когда операция базы данных будет успешной. Если это электронное письмо будет успешно отправлено, на ваш интерфейс будет отправлено сообщение об успешном завершении. В противном случае вы выдаете ошибку:

callbackкод:

app.post('/buy-thing', (req, res) => {
  const customer = req.body

  chargeCustomer(customer, (err, charge) => {
    if (err) throw err

    addToDatabase(customer, (err, document) => {
      if (err) throw err

      sendEmail(customer, (err, result) => {
        if (err) throw err

        // Tells frontend success message.
        res.send('success!')
      })
    })
  })
})

promiseкод:

app.post('/buy-thing', (req, res) => {
  const customer = req.body

  chargeCustomer(customer)
    .then(_ => addToDatabase(customer))
    .then(_ => sendEmail(customer) )
    .then(result => res.send('success!')))
    .catch(err => console.log(err))
})

понять, зачем использоватьpromisesвместоcallbacksНасколько проще писать асинхронный код? Вы внезапно перешли из ада обратного вызова в закованный рай 😂.

Активировать несколько промисов одновременно

promisesСравниватьcallbacksЕще одним преимуществом является то, что два (или более) промиса могут быть запущены одновременно, если операции не зависят друг от друга, но для выполнения третьей операции требуются два результата.

Для этого вы используетеPromise.allСпособ и пройти набор обещаний, которые вы хотите подождать.thenАргументом будет массив, содержащий результаты, возвращаемые вашими промисами.

const friesPromise = getFries()
const burgerPromise = getBurger()
const drinksPromise = getDrinks()

const eatMeal = Promise.all([
  friesPromise,
  burgerPromise,
  drinksPromise
])
  .then([fries, burger, drinks] => {
    console.log(`Chomp. Awesome ${burger}! 🍔`)
    console.log(`Chomp. Delicious ${fries}! 🍟`)
    console.log(`Slurp. Ugh, shitty drink ${drink} 🤢 `)
  })

Примечание: существует такжеPromise.raceметод, но я не нашел подходящего варианта использования. вы можете нажатьздесьчтобы проверить это.

Наконец, давайте поговорим о поддержке браузера! Если вы не можете использовать его в производстве, то зачем учитьсяpromisesШерстяная ткань. правильно?

Обещание поддержки браузера

Захватывающая новость заключается в следующем:Все основные браузеры поддерживают промисы!

Если вам нужна поддержкаIE 11и ниже вы можете использоватьTaylor HakesPromise Polyfill.它支持IE8的promises。 😮

Эпилог

promisesзнание. вкратце,promisesПревосходно.它可以帮助你编写异步代码，而无需进入回调地狱。

Хотя вы можете захотеть использовать всякий раз, когдаpromises, но в некоторых случаяхcallbacksтакже имеет смысл. не забывайcallbacksАх 😉.

Если у вас есть вопросы, не стесняйтесь комментировать ниже, и я свяжусь с вами как можно скорее. [PS: Перевод этой статьи, если вам нужен автор, чтобы ответить на ваши вопросы, пожалуйста, переместитеОригинальная авторская статьякомментарий ниже]

Спасибо за прочтение. Вам помогла эта статья? Если есть, я надеюсь, вы подумаете о том, чтобы поделиться им. Возможно, вы сможете помочь другим. большое спасибо!

позже

оригинал:Затем снова и снова Wukong.com/blog/is-pro…

Статья впервые опубликована:GitHub.com/still99/блог…

Больше содержания:GitHub.com/still99/блог…

Следующая статья об async/await

Категории