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


Posted in Javascript onSeptember 01, 2017

实例如下所示:

//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();

以上这篇基于Promise 异步编程的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 #Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
详解使用angular的HttpClient搭配rxjs
Sep 01 #Javascript
JS中关于正则的巧妙操作
Aug 31 #Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 #Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 #Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 #Javascript
You might like
php 设计模式之 单例模式
2008/12/19 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP中session变量的销毁
2014/02/27 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
微信小程序自定义组件
2017/08/16 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
Python Matplotlib库入门指南
2015/05/18 Python
python读写json文件的简单实现
2017/04/11 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
新手学python应该下哪个版本
2020/06/11 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
SQL Server笔试题
2012/01/10 面试题
工商管理应届生求职信
2013/10/07 职场文书
读书之星事迹材料
2014/05/12 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
聘任书格式及范文
2015/09/21 职场文书
工作报告范文
2019/06/20 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis