Home > Article > Web Front-end > A brief analysis of the differences between Promise, Generator and Async
Promise and Async/await functions are both used to solve asynchronous problems in JavaScript, so what is the difference between them? The following article will introduce to you the differences between Promise, Generator and Async. I hope it will be helpful to you!
We know that the Promise and Async/await functions are used to solve asynchronous problems in JavaScript. From the very beginning The callback function handles asynchrony, Promise handles asynchronous, Generator handles asynchronous, and then Async/await handles asynchronous, every technical update makes JavaScript The way to handle asynchronous processing is more elegant. From the current point of view, Async/await is considered the ultimate solution for asynchronous processing, making JS's asynchronous processing more and more like synchronous tasks. The highest state of asynchronous programming is that you don’t have to worry about whether it is asynchronous.
1. Callback function
From the early Javascript code, in ES6 Before its birth, basically all asynchronous processing was implemented based on callback functions. You may have seen the following code:
ajax('aaa', () => {
// callback 函数体
ajax('bbb', () => {
// callback 函数体
ajax('ccc', () => {
// callback 函数体
})
})
})Yes, before the emergence of ES6, this kind of code can be said to be everywhere . Although it solves the problem of asynchronous execution, it is followed by the Callback Hell problem that we often hear:
Therefore, in order to solve this problem, the community first proposed and implemented Promise, and ES6 wrote it into the language standard to unify its usage.
2.Promise
Promise is a solution to asynchronous programming, which is better than the traditional solution-callback function and Events - more reasonable and powerful. It was born to solve the problems caused by callback functions.
With the Promise object, asynchronous operations can be expressed as a synchronous operation process, avoiding layers of nested callback functions. In addition, Promise objects provide a unified interface, making it easier to control asynchronous operations.
So we can change the above callback function to this: (provided that ajax has been wrapped with Promise)
ajax('aaa').then(res=>{
return ajax('bbb')
}).then(res=>{
return ajax('ccc')
})By using Promise to handle asynchronous, for example The previous callback functions look clearer, solving the problem of callback hell. The then chain calls of Promise are more acceptable and are in line with our synchronization ideas.
But Promise also has its shortcomings:
try catch, you can only use # The second callback of ##then or catch to capture
let pro
try{
pro = new Promise((resolve,reject) => {
throw Error('err....')
})
}catch(err){
console.log('catch',err) // 不会打印
}
pro.catch(err=>{
console.log('promise',err) // 会打印
})
From how to use to how to implement a Promisehttps://juejin.cn/post/7051364317119119396
3.Generator
Generator function is an asynchronous programming solution provided by ES6, and its syntactic behavior is the same as that of traditional functions completely different. Generator Functions take JavaScript asynchronous programming to a whole new level.
Declaration
is similar to the function declaration, except that there is a star between thefunction keyword and the function name number, and the yield expression is used inside the function body to define different internal states (yield means "output" in English).
function* gen(x){
const y = yield x + 6;
return y;
}
// yield 如果用在另外一个表达式中,要放在()里面
// 像上面如果是在=右边就不用加()
function* genOne(x){
const y = `这是第一个 yield 执行:${yield x + 1}`;
return y;
}
Execution
const g = gen(1);
//执行 Generator 会返回一个Object,而不是像普通函数返回return 后面的值
g.next() // { value: 7, done: false }
//调用指针的 next 方法,会从函数的头部或上一次停下来的地方开始执行，直到遇到下一个 yield 表达式或return语句暂停,也就是执行yield 这一行
// 执行完成会返回一个 Object,
// value 就是执行 yield 后面的值,done 表示函数是否执行完毕
g.next() // { value: undefined, done: true }
// 因为最后一行 return y 被执行完成,所以done 为 trueAfter calling the Generator function, the function is not executed, and what is returned is not the function operation result, but a pointer The pointer object of the internal state, which is Iterator Object (Iterator Object). Next, the next method of the traverser object must be called to move the pointer to the next state.
function *fetch() {
yield ajax('aaa')
yield ajax('bbb')
yield ajax('ccc')
}
let gen = fetch()
let res1 = gen.next() // { value: 'aaa', done: false }
let res2 = gen.next() // { value: 'bbb', done: false }
let res3 = gen.next() // { value: 'ccc', done: false }
let res4 = gen.next() // { value: undefined, done: true } done为true表示执行结束Since the traverser object returned by the Generator function, the next internal state will be traversed only by calling the next method. So it actually provides a function that can pause execution. yieldThe expression is the pause flag.
next method of the traverser object is as follows.
yield, it will suspend the execution of subsequent operations and return the value of the expression immediately following yield The value attribute value of the object.
next method is called, execution will continue until the next yield expression is encountered.
（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。
yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。
怎么理解这句话？我们来看下面这个例子：
function* foo(x) {
var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }由于yield没有返回值，所以（yield（x+1））执行后的值是undefined，所以在第二次执行a.next()是其实是执行的2*undefined，所以值是NaN，所以下面b的例子中，第二次执行b.next()时传入了12，它会当成第一次b.next()的执行返回值，所以b的例子中能够正确计算。这里不能把next执行结果中的value值与yield返回值搞混了，它两不是一个东西
yield与return的区别
相同点:
区别:
4.Async/await
Async/await其实就是上面Generator的语法糖，async函数其实就相当于funciton *的作用，而await就相当与yield的作用。而在async/await机制中，自动包含了我们上述封装出来的spawn自动执行函数。
所以上面的回调函数又可以写的更加简洁了：
async function fetch() {
await ajax('aaa')
await ajax('bbb')
await ajax('ccc')
}
// 但这是在这三个请求有相互依赖的前提下可以这么写，不然会产生性能问题，因为你每一个请求都需要等待上一次请求完成后再发起请求，如果没有相互依赖的情况下，建议让它们同时发起请求，这里可以使用Promise.all()来处理async函数对Generator函数的改进，体现在以下四点：
async函数执行与普通函数一样，不像Generator函数，需要调用next方法，或使用co模块才能真正执行async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。async函数
async函数的返回值为Promise对象，所以它可以调用then方法
async function fn() {
return 'async'
}
fn().then(res => {
console.log(res) // 'async'
})await表达式
await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
如果表达式是 promise 对象, await 返回的是 promise 成功的值
如果表达式是其它值, 直接将此值作为 await 的返回值
await后面是Promise对象会阻塞后面的代码，Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果
所以这就是await必须用在async的原因，async刚好返回一个Promise对象，可以异步执行阻塞
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1000)
}, 1000);
})
}
function fn1() { return 'nanjiu' }
async function fn2() {
// const value = await fn() // await 右侧表达式为Promise，得到的结果就是Promise成功的value
// const value = await '南玖'
const value = await fn1()
console.log('value', value)
}
fn2() // value 'nanjiu'后三种方案都是为解决传统的回调函数而提出的，所以它们相对于回调函数的优势不言而喻。而async/await又是Generator函数的语法糖。
try catch捕获不到，只能只用then的第二个回调或catch来捕获，而async/await的错误可以用try catch捕获Promise一旦新建就会立即执行，不会阻塞后面的代码，而async函数中await后面是Promise对象会阻塞后面的代码。async函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值。async函数可以让代码更加简洁，不需要像Promise一样需要调用then方法来获取返回值，不需要写匿名函数处理Promise的resolve值，也不需要定义多余的data变量，还避免了嵌套代码。console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1()
setTimeout(function() {
console.log('setTimeout')
}, 0)
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
console.log('script end')解析：
打印顺序应该是： script start -> async2 end -> Promise -> script end -> async1 end -> promise1 -> promise2 -> setTimeout
老规矩，全局代码自上而下执行，先打印出script start，然后执行async1(),里面先遇到await async2(),执行async2,打印出async2 end，然后await后面的代码放入微任务队列，接着往下执行new Promise，打印出Promise,遇见了resolve，将第一个then方法放入微任务队列，接着往下执行打印出script end，全局代码执行完了，然后从微任务队列中取出第一个微任务执行，打印出async1 end,再取出第二个微任务执行，打印出promise1,然后这个then方法执行完了，当前Promise的状态为fulfilled,它也可以出发then的回调，所以第二个then这时候又被加进了微任务队列，然后再出微任务队列中取出这个微任务执行，打印出promise2,此时微任务队列为空，接着执行宏任务队列，打印出setTimeout。
解题技巧：
【相关推荐：javascript学习教程】
The above is the detailed content of A brief analysis of the differences between Promise, Generator and Async. For more information, please follow other related articles on the PHP Chinese website!