Mr. Lei

Js-Promise简单功能/用法
介绍 Promise对象,用来处理异步操作的,可以让异步调用的时候更加美观便理解,异步,同一时间执行多个操作,...
扫描右侧二维码阅读全文
24
2019/05

Js-Promise简单功能/用法

介绍

Promise对象,用来处理异步操作的,可以让异步调用的时候更加美观便理解,异步,同一时间执行多个操作,但如果必须要按照顺序去请求,否则程序会乱套,就可以用到Promise。
顾名思义为许诺/承诺的意思,我是这么理解的,使用Promise给后面的步骤一个承诺,承诺我会使用你,使用你,成功与否,都会告诉你。
Promise有三种状态:pending(进行中),resolved(成功执行),rejected(失败执行)。
还有一个then方法,我的理解为“然后”的意思,可以返回promise对象,这样就可以进行链式调用了

用法

function A() {
    return new Promise((resolve,reject) => {
        let a="a";
        if(a=="a"){
            console.log("我是"+a);
            resolve();
        }else{
            reject("a出错了");
        }
    });
}

function B(){
    return new Promise((resolve,reject)=>{
        let b="b";
        if(b=="b"){
            console.log("我是"+b);
            resolve();
        }else{
            reject("b出错了");
        }
    });
}

function C(){
    return new Promise((resolve,reject)=>{
        let c="c";
        if(c=="c"){
            console.log("我是"+c);
            resolve();
        }else{
            reject("c出错了");
        }
    });
}
A().then(B).then(C);

上述代码我创建了3个构造函数,按照顺序a、b、c顺序执行,结果当然是很顺利,全是resolove(成功执行)。
控制台输出为:
Promise1.jpg

reject失败处理

上面的demo过于完美,一个也没有错,当然在实际项目中没有错是不可能的,那么试着把b改错试试会怎样:

function A() {
    return new Promise((resolve,reject) => {
        let a="a";
        if(a=="a"){
            console.log("我是"+a);
            resolve();
        }else{
            reject("a出错了");
        }
    });
}

function B(){
    return new Promise((resolve,reject)=>{
        let b="bb";//这里我特意把字符串b改成bb      <==看这里
        if(b=="b"){
            console.log("我是"+b);
            resolve();
        }else{
            reject("b出错了");
        }
    });
}

function C(){
    return new Promise((resolve,reject)=>{
        let c="c";
        if(c=="c"){
            console.log("我是"+c);
            resolve();
        }else{
            reject("c出错了");
        }
    });
}
A().then(B).then(C);

输出结果为:
Promise2.jpg
这下b回调了reject(失败后的执行),并且停止b之后的执行任务
重点是看到控制台有红色报错就头皮发麻

Promise有一个catch(),可以处理错误的回调函数,在所有的回调结尾中写入.catch(错误处理的函数);

//                     参数error即reject的回调
A().then(B).then(C).catch(error=>{console.log(error)});

输出:
Promise3.jpg
可以看到,在b中出错了,但是没有报错,而是直接输入了,之后的任务也被停止了。。

Promise.all()

语法:Promise.all([fun1,fun2,fun3]);

Promise.all()可以让多个函数同时执行,而不是和then那样执行一个才会继续下一个。

demo:三名同学跑步

function f1(){
    return
}

以上是个人对Promise简单理解及用法、记录便于复习知识。

Last modification:June 10th, 2019 at 04:04 pm

One comment

  1. 嘻嘻哈哈

    嘻嘻哈哈

Leave a Comment