当前位置:首页 > ES6 > 正文内容

es6 promise

自由小鸟5年前 (2018-11-25)ES63552

1,promise中then的使用

function runAsync1(){
    var p=new Promise(function(resolve,reject){
        setTimeout(() => {
            console.log('执行完成runAsync1');
            resolve('随便什么数据1');
            }, 500);
     });
     return p;
}
function runAsync2(){
    var p=new Promise(function(resolve,reject){
    setTimeout(() => {
        console.log('执行完成runAsync2');
        resolve('随便什么数据2');
        }, 1000);
    });
    return p;
}
function runAsync3(){
    var p=new Promise(function(resolve,reject){
    setTimeout(() => {
        console.log('执行完成runAsync3');
        resolve('随便什么数据3');
        }, 2000);
    });
    return p;
}
runAsync1().then(function(data){
    console.log(data);
    return runAsync2();
})
.then(data=>{
    console.log(data);
    return runAsync3(); //如果不想打印出3里的内容直接可以在这里return 别的出去
})
.then(data=>{
    console.log(data);

})


//执行完成runAsync1

//随便什么数据1

//执行完成runAsync2

//随便什么数据2

//执行完成runAsync3

//随便什么数据3



2,reject与catch 

//reject用法,失败的状态原因
function getNumber(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(()=>{
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            console.log(num);
            if(num<=5){
                resolve(num);
            }
            else{
                reject('数字太大了');
            }
        }, 2000);
    });
    return p;
}
getNumber()
.then(data=>{
    console.log(resolved);
    console.log(data);
    console.log(somedata);//此处的somedata未定义
})
.catch((reason)=>{
    console.log('rejected');
    console.log(reason);
});
//catch 类似try catch如果我们then里的有未定的错误时,不会阻止运行,也不会报错,直接照常往下运行
//也就是说进到catch方法里面去了,而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了,这与我们的try/catch语句有相同的功能。

3,all的用法

/*all的调用
       用Promise.all来执行,all接收一个数组参数,
       里面的值最终都算返回Promise对象。
       这样,三个异步操作的并行执行的,等到它们都执行完后才会进到then里面。
       那么,三个异步操作返回的数据哪里去了呢?都在then里面呢,
       all会把所有异步操作的结果放进一个数组中传给then,
       就是上面的results
       */


function runAsync1(){
    var p=new Promise(function(resolve,reject){
        setTimeout(() => {
            console.log('执行完成runAsync1');
            resolve('随便什么数据1');
        }, 500);
    });
    return p;
}
function runAsync2(){
    var p=new Promise(function(resolve,reject){
        setTimeout(() => {
            console.log('执行完成runAsync2');
            resolve('随便什么数据2');
        }, 1000);
    });
    return p;
}
function runAsync3(){
    var p=new Promise(function(resolve,reject){
        setTimeout(() => {
            console.log('执行完成runAsync3');
            resolve('随便什么数据3');
         }, 2000);
     });
    return p;

}

//调用 all以数组的形式把这几个函数接收,然后把所有函数的返回值统一放一个数组里给then

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results.push('aaa'));
    console.log(results);
});



4,race有个时间长短的先会执行时间最短的 reject内容,下面的reject里的内容都不会执行了


//race

function runAsync1(){
    var p=new Promise(function(resolve,reject){
        setTimeout(() => {
            console.log('执行完成runAsync1');
            resolve('随便什么数据1');
        },2000);
    });
    return p;
}
function runAsync2(){
    var p=new Promise(function(resolve,reject){
        setTimeout(() => {
            console.log('执行完成runAsync2');
            resolve('随便什么数据2');
        }, 1);
    });
    return p;
}
function runAsync3(){
    var p=new Promise(function(resolve,reject){
        setTimeout(() => {
            console.log('执行完成runAsync3');
            resolve('随便什么数据3');
        }, 2000);
    });
    return p;
}

Promise
.race([runAsync1(),runAsync2(),runAsync3()])
.then(function(results){
console.log('a=='+results);
})

// 执行完成runAsync2

// 随便什么数据2

// 执行完成runAsync1

// 执行完成runAsync3



版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=33

返回列表

没有更早的文章了...

下一篇:js 数据保护

“es6 promise” 的相关文章

js 数据保护

js 数据保护

es3的写法利用构造函数闭包来实现属性不可编辑es5的写法用一个defineProperty 来实现只可读 writable:falsees6的实现,代理new Proxy来实现,思想和es3很像,操作是代理对象person...

es6 解构的使用场景

二,解构{    let a,b,rest;    [a,b]=[1,2]    console.log(a,b);  // 1 2}{   ...

es6 函数扩展

参数默认值rest参数扩展运算符箭头函数this绑定尾调用// 参数默认值{    function test(x,y='world'){        conso...

es6 Symbol

es6 Symbol

Symbol是js 提供了独一无二的值let a1=Symbol();let a2=Symbol();console.log(a1===a2)   //falselet a3=Symbol.for('a3');let a4=Symbol.for('a3&#...

精选之Promise

我们从promise是什么怎么会出现来一步步解决问题来深入了解1、了解 Promise 吗? 2、Promise 解决的痛点是什么? 3、Promise 解决的痛点还有其他方法可以解决吗?如果有,请列举。 4、Promise 如何使用? 5、Promise 常用的方法有哪些?它们的作用是什么...

自己实现最基础的promise

没事自己手写了一下 let pi=new Promise((resolve,reject)=>{ resolve(100); reject(0); }) p1.then(result=>{ console.log('成功'+result...