关于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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
js动态生成表格(节点操作)
Jan 12 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP 命令行参数详解及应用
2011/05/18 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python妹子图简单爬虫实例
2015/07/07 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
浅谈Python中的字符串
2020/06/10 Python
python判断是空的实例分享
2020/07/06 Python
详细分析Python collections工具库
2020/07/16 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
面试后感谢信怎么写
2014/02/01 职场文书
关于安全的演讲稿
2014/05/09 职场文书
环境日宣传活动总结
2014/07/09 职场文书
针对吵架老公保证书
2015/05/08 职场文书
硕士论文致谢范文
2015/05/14 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python