• promise笔记


    promise
    一,有三个状态
    pedding(正在进行),fulfilled(执行成功),rejected(执行失败)
    二,promise内含一个异步操作,异步操作控制promise状态改变
    1,pedding到fulfilled
    2,pedding到rejected
    三,promise有两个参数,并且都是函数
    1,resolve
    当异步操作执行成功之后,执行resolve
    并且修改promise状态为fulfilled
    2,reject
    当异步操作执行失败之后,执行reject
    并且修改promise状态为reject

    使用:
    一,声明一个promise
    1,字面量声明
    var runAsync = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
    console.log('执行完成');
    resolve('随便什么数据');
    }, 2000);
    });
    2,函数式声明
    function runAsync(){
    var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
    console.log('执行完成');
    resolve('随便什么数据');
    }, 2000);
    });
    return p;
    }
    3,返回值式声明
    function runAsync(ms) {
    return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
    });
    }
    二,指定resolve回调函数
    1,两步操作
    runAsync.then(function(data){
    console.log(data);
    });
    2,多步操作
    function runAsync1(){
    var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
    console.log('异步任务1执行完成');
    resolve('随便什么数据1');
    }, 1000);
    });
    return p;
    }
    function runAsync2(){
    var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
    console.log('异步任务2执行完成');
    resolve('随便什么数据2');
    }, 2000);
    });
    return p;
    }
    function runAsync3(){
    var p = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
    console.log('异步任务3执行完成');
    resolve('随便什么数据3');
    }, 2000);
    });
    return p;
    }
    runAsync1()
    .then(function(data){
    console.log(data);
    return runAsync2();
    })
    .then(function(data){
    console.log(data);
    return runAsync3();
    })
    .then(function(data){
    console.log(data);
    return '直接返回数据'; //这里直接返回数据
    });

    先执行runAsync1,成功后执行runAsync2,成功后执行runAsync3,同步执行三个异步操作

    三,reject的用法
    promise中有异步操作函数,在异步操作内部对数据进行判断,然后决定执行reject还是resolve
    四,catch的用法
    可以指定reject函数,和then的第二个参数一样作用,但是当then的第一个回调函数参数执行失败会直接进入catch并传入失败原因,不会直接报错。一般用catch作为失败原因输出,而不是then的第二个参数。
    五,promise的all用法
    作用是并行执行异步操作,异步操作全部执行完毕才开始执行回调函数
    用法:
    Promise
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function(results){
    console.log(results);//此处将上面三个异步操作的结果作为一个数组输出作为结果
    });
    使用场景:用于资源的加载,所有的都加载完后,我们再进行页面的初始化。

    六,race的用法
    all是全部的异步操作执行完毕,才开始执行then。race是第一个异步操作执行完毕就立马执行then的回调函数,若是第一个异步操作没有跑赢后面的异步操作,那么会进入catch执行。
    例如:
    //请求某个图片资源
    function requestImg(){
    var p = new Promise(function(resolve, reject){
    var img = new Image();
    img.onload = function(){
    resolve(img);
    }
    img.src = 'xxxxxx';
    });
    return p;
    }

    //延时函数,用于给请求计时
    function timeout(){
    var p = new Promise(function(resolve, reject){
    setTimeout(function(){
    reject('图片请求超时');
    }, 5000);
    });
    return p;
    }

    Promise
    .race([requestImg(), timeout()])
    .then(function(results){
    console.log(results);
    })
    .catch(function(reason){
    console.log(reason);
    });

    声明两个promise异步操作,若是请求图片快于超时的先执行完,那么执行then,反之执行catch

     promise在声明后会立即执行

    详细:https://www.cnblogs.com/whybxy/p/7645578.html

    业精于勤,荒于嬉,行成于思,毁于随~
  • 相关阅读:
    网页下载文件
    C++从内存到流
    MapServer的安装和使用
    程序中写个日志
    COM接口映射表
    webgis开源资料
    SQL基础>过滤和排序
    开源的webgis框架总结(转)
    mapserver安装相关
    Python入门,以及简单爬取网页文本内容
  • 原文地址:https://www.cnblogs.com/yu-tang/p/12963489.html
Copyright © 2020-2023  润新知