es6之深入理解promise

luckyw 发布于2019-08-26 12:11 / 3260人阅读

摘要：形式非必须，也非必须调用把用函数表示在调用的时候用函数代码更加同步化三是什么异步操作的终极解决方案写法四总结不管用还是用还是用，都保证你写的的返回值是一个对象

一、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对象

GPU云服务器云服务器深入理解webrtc之aec es6中的promise 深入理解系列深入理解linux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108192.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
深入理解 Javascript 之对象

摘要：返回如下仔细分析下面的图，将会加深你的理解和我们有一个类对象有一个属性，其指向构造器的原型是一个类构造器是之后产生的。撸js基础之对象图例 showImg(https://segmentfault.com/img/remote/1460000015949904?w=768&h=448); 先谈谈 ECMAScript 中的数据类型 ES6 之前 ECMAScript 中有 5 种...

neroneroffy 2019-08-23 10:52 评论0 收藏0