• <sup id="6cuck"><object id="6cuck"></object></sup>
  • 一聚教程网:一个值得你收藏的教程网站

    最新下载

    关于Promise 异步编程的实例讲解

    时间:2017-09-02 11:00:00 编辑:猪哥 来源:转载

    //1.解决异步回调问题
    //1.1 如何同步异步请求
    //如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务,无法实现并行节约时间
     
    const fs = require('fs');
    let school = {};
    fs.readFile('./name.txt','utf8',function (err,data) {
      school.name = data;
    });
    fs.readFile('./age.txt','utf8',function (err,data) {
      school.age = data;
    });
    console.log(school);
    //1.2如何解决回调地狱
    //在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的回调地狱
     
    const fs = require('fs');
    fs.readFile('./content.txt','utf8',function (err,data) {
      if(err)console.log(err);
      fs.readFile(data,'utf8',function (err,data) {
        if(err)console.log(err);
        console.log(data);
      })
    });
    //2.Promise
    //Promise本意是承诺,在程序中的意思就是承诺我过一段时间后会给你一个结果。 什么时候会用到过一段时间?答案是异步操作,异步是指可能比较长时间才有结果的才做,例如网络请求、读取本地文件等
     
    //3.Promise的三种状态
    //例如媳妇说想买个包,这时候他就要"等待"我的回复,我可以过两天买,如果买了表示"成功",如果我最后拒绝表示"失败",当然我也有可能一直拖一辈子
     
    //Pending Promise对象实例创建时候的初始状态
    //Fulfilled 可以理解为成功的状态
    //Rejected 可以理解为失败的状态
    //then 方法就是用来指定Promise 对象的状态改变时确定执行的操作,resolve 时执行第一个函数(onFulfilled),reject 时执行第二个函数(onRejected)
    //4.构造一个Promise
    //4.1 promise的方法会立刻执行
    let promise = new Promise(()=>{
      console.log('hello');
    });
    console.log('world');
    //4.2 promise也可以代表一个未来的值
    const fs = require('fs');
    let promise = new Promise((resolve,reject)=>{
      fs.readFile('./content.txt','utf8',function (err,data) {
        if(err)console.log(err);
        resolve(data);
      })
    });
    promise.then(data =>{
      console.log(data);
    });
    //4.3 代表一个用于不会返回的值
    const fs = require('fs');
    let promise = new Promise((resolve,reject)=>{});
    promise.then(data =>{
      console.log(data);
    });
    //4.4 应用状态实现抛硬币
    function flip_coin() {
      return new Promise((resolve,reject)=>{
        setTimeout(function () {
          var random = Math.random();
          if(random > 0.5){
            resolve('正');
          }else{
            resolve('反');
          }
        },2000)
      })
    }
    flip_coin().then(data=>{
      console.log(data);
    },data=>{
      console.log(data);
    });
    //5.实现简单的Promise
    function Promise(fn) {
      fn((data)=>{
        this.resolve(data)
     
      },(data)=>{
        this.reject(data);
      })
    }
    Promise.prototype.resolve = function (data) {
      this._success(data)
    };
    Promise.prototype.reject = function (data) {
      this._error(data);
    };
    Promise.prototype.then = function (success,error) {
      this._success = success;
      this._error = error;
    };
    //6.Error会导致触发Reject
    //可以采用then的第二个参数捕获失败,也可以通过catch函数进行捕获
     
    function flip_coin() {
      return new Promise((resolve,reject)=>{
        throw Error('没有硬币')
      })
    }
    flip_coin().then(data=>{
      console.log(data);
    }).catch((e)=>{
      console.log(e);
    })
    //7.Promise.all实现并行
    //接受一个数组,数组内都是Promise实例,返回一个Promise实例,这个Promise实例的状态转移取决于参数的Promise实例的状态变化。当参数中所有的实例都处于resolve状态时,返回的Promise实例会变为resolve状态。如果参数中任意一个实例处于reject状态,返回的Promise实例变为reject状态
     
    const fs = require('fs');
    let p1 = new Promise((resolve,reject)=>{
      fs.readFile('./name.txt','utf8',function (err,data) {
        resolve(data);
      });
    })
    let p2 = new Promise((resolve,reject)=>{
      fs.redFile('./age.txt','utf8',function (err,data) {
        resolve(data);
      });
    })
    Promise.all([p1,p2]).then(([res1,res2])=>{
      console.log(res1);
    })
    //不管两个promise谁先完成,Promise.all 方法会按照数组里面的顺序将结果返回
    //8.Promise.race实现选择接受一个数组,数组内都是Promise实例,返回一个Promise实例,这个Promise实例的状态转移取决于参数的Promise实例的状态变化。当参数中任何一个实例处于resolve状态时,返回的Promise实例会变为resolve状态。如果参数中任意一个实例处于reject状态,返回的Promise实例变为reject状态。
     
    const fs = require('fs');
    let p1 = new Promise((resolve,reject)=>{
      fs.readFile('./name.txt','utf8',function (err,data) {
        resolve(data);
      });
    })
    let p2 = new Promise((resolve,reject)=>{
      fs.readFile('./age.txt','utf8',function (err,data) {
        resolve(data);
      });
    })
    Promise.race([p1,p2]).then(([res1,res2])=>{
      console.log(res1,res2);
    })
    9.Promise.resolve
    //返回一个Promise实例,这个实例处于resolve状态。
     
    Promise.resolve('成功').then(data=>{
      console.log(data);
    })
    10.Promise.reject
    //返回一个Promise实例,这个实例处于reject状态
     
    Promise.reject('失败').then(data=>{
      console.log(data);
    },re=>{
      console.log(re);
    })
    //11.封装ajax
    function ajax({url=new Error('url必须提供'),method='GET',async=true,dataType='json'}){
     return new Promise(function(resolve,reject){
       var xhr = new XMLHttpRequest();
       xhr.open(method,url,async);
       xhr.responseType = dataType;
       xhr.onreadystatechange = function(){
         if(xhr.readyState == 4){
           if(/^2\d{2}/.test(xhr.status)){
            resolve(xhr.response);
           }else{
             reject(xhr.response);
           }
         }
       }
       xhr.send();
     });
    }
    //12.chain中返回结果
    Promise.resolve([1,2,3])
    .then(arr=>{
      return [...arr,4]
    }).then(arr=>{
      return [...arr,5]
    }).then(arr=>{
      console.log(arr);
    })
    //13.chain中返回promise
    //then中的结果是promise的resolve后的结果
     
    Promise.resolve('user').then(data=>{
      return new Promise(function (resolve,reject) {
        fetch('/'+data).then(res=>res.json().then((json)=>{
          resolve(json)
        }))
      })
    }).then(data=>{
      console.log(data);
    });
    //改写的更简单些
     
    Promise.resolve('user').then(data=>{
      return fetch('/'+data)
    }).then(res=>{
      return res.json();
    }).then(data=>{
      console.log(data);
    })
    //14.async/await
    //本质是语法糖,await与async要连用,await后只能跟promise
     
    async function getHello() {
      return new Promise((resolve,reject) => {
        setTimeout(function () {
          resolve('hello');
        },2000);
      })
    }
    async function getData () {
      var result = await getHello();
      console.log(result);
    } ;
    getData();

    文章评论

    热门栏目

    65期玄机挂牌资料 将乐县| 原阳县| 嵊州市| 北海市| 嵊泗县| 辉县市| 铜鼓县| 通榆县| 沈丘县| 桦甸市| 富裕县| 韶山市| 古浪县| 增城市| 嫩江县| 潍坊市| 巨鹿县| 自贡市| 枞阳县| 龙里县| 阳朔县| 昂仁县| 张家川| 桓仁| 泗洪县| 宁远县| http://www.fjjwtz.cn 东明县| 若尔盖县| 图们市| 广德县| 苗栗市| 梁河县| 宣威市| 德惠市| 阳原县| 安图县| 珠海市| 乐东| 奉节县| 深泽县| 达尔| 当涂县| 北安市| 耒阳市| 民勤县| 潮安县| 慈溪市| 老河口市| 海原县| 安徽省| 张家界市| 云安县| 天等县| 建水县| 曲松县| http://www.wiaoit.cn 桃园市| 墨竹工卡县| 黔东| 海城市| 兴安县| 盐城市| 满洲里市| 徐闻县| 营口市| 新兴县| 兴义市| 武山县| 威宁| 五寨县| 景洪市| 莱芜市| 疏勒县| 乌审旗| 平江县| 淳化县| 西宁市| 榆中县| 正蓝旗| 铁力市| 民勤县| 庆阳市| 天峨县| 南汇区| 林芝县| 上虞市| 扎囊县| 南涧| 安阳县| 循化| http://www.zorvpc.cn 崇左市| 潞西市| 枣强县| 西安市| 麻栗坡县| 多伦县| 屯留县| 林芝县| 静安区| 伊川县| 通山县| 崇信县| 榆林市| 易门县| 麻城市| 庆云县| 宜春市| 张北县| 永昌县| 田东县| 交口县| 都江堰市| 兰坪| 凭祥市| 东丽区| 皮山县| 杨浦区| 莆田市| 五指山市| http://www.feggcj.cn 炎陵县| 新宁县| 湛江市| 贡嘎县| 沙雅县| 比如县| 靖远县| 溆浦县| 黎城县| 青铜峡市| 吴旗县| 达州市| 五原县| 青铜峡市| 红原县| 广宗县| 札达县| 莱芜市| 尼木县| 余干县| 波密县| 教育| 分宜县| 龙州县| 务川| 巩义市| 岳普湖县| 万源市| 福州市| http://www.oddcyh.cn 仪陇县| 桓台县| 涡阳县| 湾仔区| 安顺市| 平乐县| 伊金霍洛旗| 丰镇市| 黄平县| 玛沁县| 佳木斯市| 工布江达县| 阳新县| 鄂温| 阳山县| 大足县| 城步| 进贤县| 祁东县| 广元市| 荣昌县| 长武县| 南木林县| 通州区| 吴忠市| 屯昌县| 德庆县| 通城县| http://www.hmhwfc.cn 容城县| 临高县| 邵东县| 托克托县| 南郑县| 上饶市| 白朗县| 鄂州市| 亚东县| 平利县| 依安县| 昭通市| 武川县| 公安县| 东兴市| 康保县| 永安市|