Promise 异步

Posted 2020-12-24 sunnywindycloudy

ES5中的回调地狱了解吗？如a回调b，b回调c，c回调d……层层回调，就叫回调地狱

//异步，回调函数
//1
function loadScript(src,callback){
    let script=document.createElement(‘script‘);
    script.src=src;
    script.onload=()=>{callback();}
    document.head.append(script);
}

function test(){
    console.log(‘test‘);
}

loadScript(‘./1.js‘);
test();//先执行

loadScript(‘./1.js‘,test);

//2 回调地狱
function loadScript(src,callback){
    let script=document.createElement(‘script‘);
    script.src=src;
    script.onload=()=>{callback(src);}
    script.onerror=()=>{callback(err);}
    document.head.append(script);
}
function test(name){
    console.log(name);
}

loadScript(‘./1.js‘,function(script){
    if(script.message){
        //监控上报逻辑
        loadScript(‘./2.js‘,function(){
            console.log(script);
        });
    }else{
        console.log(script);
        loadScript(‘./2.js‘,function(){
            console.log(script);
            loadScript(‘./3.js‘,function(){
                console.log(script);
            });
        });
    }
    
});

 

ES6是如何通过异步操作来实现的呢？

 

//Promise
function loadScript(src){
//pending,undefined
    return new Promise((resolve,reject)=>{
        let script=document.createElement(‘script‘);
        script.src=src;
        script.onload=()=>resolve(src);//返回状态：fulfilled，返回结果：resule
        script.onerror=()=>reject(err);//返回状态：rejected，返回结果：error
        document.head.append(script);
    });
}

loadScript(‘./1.js‘)
.then(loadScript(‘./2.js‘))
.then(loadScript(‘./3.js‘));


//then：是Promise的原型对象，随时可以调用
//Promise.then(onFulfilled(必填),onRejected(非必填));两个都是函数类型
//如果传的是非函数对象，then就一定能返回一个新的空的Promise对象，就能保证链式调用

//上面调用写法不规范，修改为
loadScript(‘./1.js‘)
.then(()=>{
    return loadScript(‘./2.js‘);//通过return返回值，让它变成非函数，才能完成链式调用
    },(err)=>{
        console.log(err);
    })
    .then(()=>{
        loadScript(‘./3.js‘);
    },(err)=>{
        console.log(err);
    });

//返回数字，转变为new Promise对象，调用then方法
function test(bool){
    if(bool){
        return new Promise();
    }else{
        return 42;
    }
}
test().then();//返回数字42，then调用不了

//返回resolve
function test(bool){
    if(bool){
        return new Promise((resolve,reject)=>{
            resolve(30);
        });
    }else{
        return Promise().resolve(42);
    }
}
//调用
test(0).then((value)=>{
    console.log(value);//输出：42
});
test(1).then((value)=>{
    console.log(value);//输出：30
});

//返回reject
function test(bool){
    if(bool){
        return new Promise((resolve,reject)=>{
            resolve(30);
        });
    }else{
        return Promise().reject(new Error(‘ss‘));
    }
}
//调用
test(0).then((value)=>{
    console.log(value);
},(err)=>{
    console.log(err);//输出：Error:ss
});

 catch捕获错误

//处理错误的方法
loadScript(‘./1.js‘)
.then(()=>{
    return loadScript(‘./2.js‘);
    })
    .then(()=>{
        loadScript(‘./3.js‘);
    })
    .catch(err=>{
        console.log(err);
    });

//catch不是静态方法，是实例方法，是Promise对象原型链上的方法
//catch用来捕获reject抛出的错误
//throw new Error，不能使用这个方法里捕获Promise的错误