ES6--promise

来源：互联网发布：飞鸽传书网络连接失败编辑：程序博客网时间：2024/05/18 00:02

1.问题的提出，请看下面代码

function asyncFun(a,b,cb){    setTimeout(function() {        cb(a+b);    },200);}asyncFun(1,2,function(result){      if(result>2){          console.log(result)      }})

上面代码模拟了一个异步回调，很容容易看懂，但是如果回调里面继续有回调的时候呢，如下

function asyncFun(a,b,cb){    setTimeout(function() {        cb(a+b);    },200);}asyncFun(1,2,function(result){      if(result>2){          asyncFun(result,2,function(result){              if(result>4){                  console.log("ok");              }          })      }})

上述代码继续进行回调，显然当层次比较多的时候，就不太符合人类的阅读习惯了，因此引入了promise规范。

'use strict';function asyncFun(a, b) {    return new Promise(function (resolve, reject){                if(typeof a!='number'|| typeof b!='number'){            reject(new Error('not number type'))        }            resolve(a+b)    })}asyncFun(1, '2').then(    function(result){        if(result>2){         return    asyncFun(result,2)        }    }).then(function(result){        if(result>4){            console.log(result+'OK')        }    }).catch(function(err){        console.log(err)    })

上述代码不断有效的避免了深层次回调的写法，并且对异常的情况进行了处理，其中异常的处理，也可以进行如下

'use strict';function asyncFun(a, b) {    return new Promise(function (resolve, reject){        //setTimeout(function () {        if(typeof a!='number'|| typeof b!='number'){            reject(new Error('not number type'))        }            resolve(a+b)    })}asyncFun(1, '2').then(    function(result){        if(result>2){         return    asyncFun(result,2)        }    },    function(err){//1111        console.log('first err------'+err)    }).then(function(result){        if(result>4){            console.log(result+'OK')        }    }).catch(function(err){//2222        console.log(err)    })

从上述代码可以看出当1111处出现了语句后，2222处就不会执行了

2.请看一下代码，加深一下印象。

'use strict';class User {    constructor(name) {        this.name = name;    }    send(cb) {        let name = this.name;        return new Promise(function (resolve, reject) {            if (name == 'ggb') {                resolve('sucess');            } else {                reject('err');            }        })    }}new User('ggb').send().then(function(sucess){    console.log(sucess);     //执行该段代码},function(err){    console.log(err)})

进行改良，同时进行验证两个参数

'use strict';class User {    constructor(name,password) {        this.name = name;        this.password = password;    }    validateName(cb) {        let name = this.name;        return new Promise(function (resolve, reject) {            if (name == 'ggb') {                resolve('sucess');            } else {                reject('name err');            }        })    }    validatePassword(cb) {        let password = this.password;        return new Promise(function (resolve, reject) {            if (password == 1111) {                resolve('both sucess');            } else {                reject('password err');            }        })    }}const user=new User('ggb',1111);user.validateName().then(function(){   return user.validatePassword() //11111}).then(function(sucess){    console.log(sucess)}).catch(function(err){    console.log(err);})

上述11111处的代码，也可以改为

user.validateName().then(function(){   return 'validate name ok' //11111}).then(function(sucess){    console.log(sucess)})

其实11111处的代码，没有返回promice ,但是类似于

var promise = Promise.resolve('valide name ok');

Promise.resovle ==============> var promice = new Promise(function(resolve,reject){

resovle('valide name ok');

})

3.Promise.all用法

看代码就可以知道，可以保存各个执行的结果

'use strict';function asyncFun(a, b) {    return new Promise(function (resolve, reject){        //setTimeout(function () {        if(typeof a!='number'|| typeof b!='number'){            reject(new Error('not number type'))        }         setTimeout(function(){             resolve(a+b)         },500)    })}var promise= Promise.all([asyncFun(1, 2),asyncFun(3, 4)]);promise.then(function(result){    console.log(result)})

同时，promise还有一个race方法，顾名思义，竞赛的意思，就是取先执行完毕那个异步的值

阅读全文

0 0