一, promise 入门
1. Promise 对象是什么
回调函数的另一种原生实现, 比之前回调函数的写法机构清晰, 功能强大,
2. 以前回调这么写
- function a(fn){
- let h = 1;
- setTimeout(function(){
- if(h==1){
- fn(h)
- }else{
- throw Error('error!')
- }
- },1000)
- }
- // 调用
- a(function(m){
- console.log(m+'callback')
- })
3. 用 Promise 写回调
- function a(){
- return new Promise(function(resole,reject){
- setTimeout(function(){
- if(h==1){
- resole(h)
- }else{
- reject(error)
- }
- },1000)
- })
- }
- // 调用
- a().then(function(data){
- console.log(data)
- },function(err){
- console.log(err)
- })
4. 多层回调实现
- // 函数封装
- function fn(n,callback){
- setTimeout(function(){
- callback(n)
- },1000)
- }
- function fn2(m,callback){
- setTimeout(function(){
- callback(m)
- },800)
- }
- function fn3(h,callback){
- setTimeout(function(){
- callback(h)
- },600)
- }
- // 多层回调调用
- fn(1, function(n){
- console.log('fn='+n);
- fn2(2,function(n2){
- console.log('fn2='+n2);
- fn3(3,function(n3){
- console.log('fn3='+n3)
- console.log('end')
- })
- })
- });
可见 (1) 中多层回调写起来很乱, 不利于维护, 下面用 Promise 实现
- function pm(n){
- return new Promise(function(resolve,reject){
- setTimeout(function(){
- if(n){
- resolve(n)
- }else{
- reject(error)
- }
- },1000)
- })
- }
- function pm2(n){
- return new Promise(function(resolve,reject){
- setTimeout(function(){
- if(n){
- resolve(n)
- }else{
- reject(error)
- }
- },1000)
- })
- }
- function pm3(n){
- return new Promise(function(resolve,reject){
- setTimeout(function(){
- if(n){
- resolve(n)
- }else{
- reject(error)
- }
- },1000)
- })
- }
- // 调用
- pm(1).then(function(data){
- console.log('pm='+data);
- return pm2(2)
- }).then(function(data){
- console.log('pm2='+data);
- return pm3(3)
- }).then(function(data){
- console.log('pm3='+data);
- })
用 promise 调用的写法更加直观
二, Generator
1.Generator 函数
(1)异步编程思想来写同步代码
(2)遍历器生成函数
(3)状态机, 封装了多个内部状态.
2. 形式
- function* abc(){
- //yield 非必须, return 也非必须;
- yield 'a';
- yield 'b';
- return 'c'
- }
- // 调用
- var h = abc();
- h.next();//{value:'a',done:false}
- h.next();//{value:'b',done:false}
- h.next();//{value:'c',done:true}
- h.next();//{value:undefined,done:true}
3. 把 Promise 用 Generator 函数表示
- function pm(n){
- return new Promise((resolve,reject)=>{
- setTimeout(function(){
- console.log(n)
- resolve()
- },1000)
- })
- }
- function pm2(n){
- return new Promise((resolve,reject)=>{
- setTimeout(function(){
- console.log(n)
- resolve()
- },800)
- })
- }
- function pm3(n){
- return new Promise((resolve,reject)=>{
- setTimeout(function(){
- console.log(n)
- resolve()
- },600)
- })
- }
- function* gPm(){
- yield pm(1);
- yield pm2(2);
- yield pm3(3);
- }
- let p = gPm();
- p.next().value.then(function(){
- p.next().value.then(function(){
- p.next().value.then(function(){
- })
- })
- })
在调用的时候用 Generator 函数; 代码更加同步化
三, async/await
1. async/await 是什么
(1)异步操作的终极解决方案
2. 写法
- function pm(n){
- return new Promise((resolve,reject)=>{
- setTimeout(function(){
- console.log(n)
- resolve()
- },1000)
- })
- }
- function pm2(n){
- return new Promise((resolve,reject)=>{
- setTimeout(function(){
- console.log(n)
- resolve()
- },800)
- })
- }
- function pm3(n){
- return new Promise((resolve,reject)=>{
- setTimeout(function(){
- console.log(n)
- resolve()
- },600)
- })
- }
- async function p(){
- await pm(1)
- await pm2(2)
- await pm3(3)
- }
- p()
四, 总结
不管用 then 还是用 generator 还是用 async, 都保证你写的 function 的返回值是一个 **promise** 对象
来源: https://www.cnblogs.com/lianxiaozhuang/p/9486585.html