In JavaScript, all code is single-threaded, that is, executed synchronously, and Promise offers a solution for asynchronous programming.

When are asynchronous events handled?

  • A very common scenario would be a network request.
  • We encapsulate a network request function that cannot return the result as simple 1+2=7 because it does not get the result immediately.
  • So often we pass in another function that calls the data back out when the request succeeds.
  • If it’s just a simple network request, then this solution won’t cause us too much trouble.
  • But callback hell occurs when network requests are very complex.

The callback hell

Asynchronous JavaScript or JavaScript that uses callbacks makes it difficult to intuitively get the right results. One of the biggest reasons for callback hell is that you write code that is so rigid and disciplined that you try to execute a second layer of code under one function. But it’s clear that the effect is more effective.

Const p = new Promise((resolve, resolve, Reject) => {// Simulate async setTimeout(() => {console.log(' first request ') console.log(' first request ') console.log(' first request ') Log (' first request ') console.log(' first request ')/ setTimeout(() => {console.log(' second request ') console.log(' second request ') Console. log(' second request ') console.log(' second request ') setTimeout(() => {console.log(' third request ') Log (' third request ') console.log(' third request ') console.log(' third request ') console.log(' third request ')})})},1000)})Copy the code

State of Promise

The Promise asynchronous operation has three states: Pending, FULFILL and Rejected. Nothing other than the result of an asynchronous operation can change this state. The Promise object has only the state changes from Pending to fulfilled and from pending to Rejected. This is a big pity and rejected, and the state will not change again.

Basic use of Promise

Normal call

Const a = new Promise((resolve, reject) => {setTimeout(() => {resolve()}, 1000)}) const b = new Promise((resolve, reject) => {resolve()}, 1000)}) const c = new Promise((resolve, reject) => {resolve()}, 1000)}) a.log (() => {console.log(' first request ') console.log(' first request ') console.log(' first request ') console.log(' first request ') Console.log (' first request ')}) b.chen (() => {console.log(' second request ') console.log(' second request ') console.log(' second request ') Console.log (' second request ') console.log(' second request ')}) c.chen (() => {console.log(' third request ') console.log(' third request ') Log (' third request ') console.log(' third request ') console.log(' third request ')})Copy the code

Multiple callback

Const p = new Promise((resolve, reject) => {setTimeout(() => {resolve()}, 1000)}).then(() => {console.log(' first request ') console.log(' first request ') console.log(' first request ') console.log(' first request ') Console. log(' first request ') return new Promise((resolve, reject) => {setTimeout(() => {resolve()}, 1000)})}).then(() => {console.log(' second request ') console.log(' second request ') console.log(' second request ') console.log(' second request ') Console. log(' second request ') return new Promise((resolve, reject) => {setTimeout(() => {resolve()}, 1000)})}).then(() => {console.log(' third request ') console.log(' third request ') console.log(' third request ') console.log(' third request ') Console. log(' third request ')})Copy the code

Chain calls

A complete written

const p = new Promise((resolve, Reject) => {setTimeout(() => {resolve(' this is ')},1000)}). Then (res => {console.log(res) return new Promise((resolve, Reject) => {resolve(res + 'complete ')})}). Then (res => {console.log(res) return new Promise((resolve, Reject) = > {resolve + 'passage (res)})}). Then (res = > {the console. The log (res)})Copy the code

shorthand

const p = new Promise((resolve, Reject) => {setTimeout(() => {resolve(' this is ')},1000)}).then(res => {console.log(res) return promise.resolve (res +) Resolve (res + '1 ')}). Then (res => {console.log(res) return promise.resolve (res +' 1 ')}). Then (res => {console.log(res)}).Copy the code

The shorthand

const p = new Promise((resolve, Reject) => {setTimeout(() => {resolve(' this is ')},1000)}).then(res => {console.log(res) return res + 'complete'}).then(res) => {console.log(res) return res + 'a line'}). Then (res => {console.log(res)})Copy the code

The catching

Catch (error => console.log(error))