文档章节

promise解决回调地狱

lemonzoey
 lemonzoey
发布于 2017/08/25 19:40
字数 495
阅读 47
收藏 0

基本介绍

Promise 在 Ecmascript 6 中体现出来就是一个对象,Promise 是一个容器,一般用来封装一个异步操作,异步操作是一个无法预测的事情,要么成功,要么失败

容器内部有三种状态:

  • 1.pending 正在处理
  • 2.resolved 成功,已解决
  • 3.rejected 驳回,失败
const fs =require("fs")
 var promise = new Promise(function (resolve, reject) {
     fs.readFile("./data/1.txt","utf8",function (err,data) {
         if(err){
             // 当 Promise 对象内部的异步操作结果失败的时候,告诉 Promise 对象容器,该异步任务失败了
             // 其实就是将 Promise 内部的 Pending 状态改为 Rejected
             reject(err);
         }
         // 当代码执行到这里,说明该 Promise 对象内部的异步操作没有错误发生,证明成功了
         // 然后在这里将 Promise 内部的 Pending 状态改为 Resolved
         resolve(data)
         console.log("d");
     })
 })
 // Promise 实例对象有一个方法:then 方法
 // then 需要传递两个回调处理函数
 // 其中第一个回调处理函数就是 Promise 对象内部的  resolve 函数
 // 第二个回调处理函数是可选的,如果传递则就是 Promise 对象内部的 reject 函数
 .then((data)=>{
     console.log("1111");
     console.log(data.toString());
     return new Promise((resolve,reject)=>{
         fs.readFile("./data/3.txt","utf8",function (err,data) {
             if(err){
                 // 这里没有使用 return 的原因就是 Promise 的状态只能从 Pending 变为 Resolve 或者 Rejected
                 // 状态一旦改变,就不会再发生变化
                 reject(err)
             }
               resolve(data)
         })
     })
 },(err)=>{
     console.log("读取文件3失败了");
 })
     .then((data)=>{
         console.log("333");
         console.log(data);
         return new Promise((resolve,reject)=>{
             fs.readFile("./data/2.txt",function (err) {
                 if(err){
                     reject(err)
                     console.log("读取文件2失败啦");
                 }else{
                     resolve(data)
                 }
             })
         })
     },(err)=>{
         console.log(err);
         console.log("读取文件2失败啦");
     })
     .then((data)=>{
         console.log("2222");
         console.log(data);
     })
     .catch((err)=>{
         console.log("err");
         console.log(err);
     })

###封装函数后的promise

const fs = require("fs")
readFile("./data/1.txt")
    .then((data)=>{
        console.log(data);
      return  readFile("./data/3.txt")//此处是链式编程,需要返回this
    })
    .then((data)=>{
        console.log(data);
       return readFile("./data/2.txt")
    })
    .then((data)=>{
        console.log(data);
    })
function readFile(...url){
   return new Promise((resolve,reject)=>{
        fs.readFile(...url,"utf8",function (err,data) {
            if(err){
                reject(err)
            }
            resolve(data)
        })
    })

}

© 著作权归作者所有

lemonzoey
粉丝 0
博文 11
码字总数 54195
作品 0
私信 提问
【真知拙见】回调地狱和Promise

异步编程在JavaScript中非常重要,但是过多的异步编程同时也带来了回调嵌套的问题。 什么是回调函数? 以上代码就是一个回调函数。一个函数作为参数需要依赖另一个函数执行调用。 但是回调函...

02/14
0
0
Promise到底解决了什么问题?

我的github github.com/zhuanyongxi… 大家都知道Promise解决了回调地狱的问题。说到回调地狱,很容易想到下面这个容易让人产生误解的图片: 可回调地狱到底是什么?它到底哪里有问题?是因为...

砖用冰西瓜
2018/07/11
0
0
使用Promise 和 $.Deferred 解决js回调地狱

为了提高页面加载效率,越来越多的项目都在使用js异步加载。那么如果多个异步加载结果互相依赖,并且嵌套会发生什么事情?没错就是让人闻风丧胆的回调地狱。下面我们就用setTimeout方法来模拟...

kimyeongnam
2017/10/25
14
0
async/await 之于 Promise,正如 do 之于 monad

原文链接 CertSimple 网站最近发布了一篇文章,说 ES2017 里的 async 和 await 是 JS 最好的特性。我非常赞同。 基本上来说,JS 为数不多的几个优点之一就是对异步请求的处理得当。这得益于它...

方应杭在饥人谷
05/13
0
0
PromiseClass 0.9.5 发布,Promise 黑魔法

回调恶魔 在目前Javascript技术背景下,当碰到大量异步代码时,会非常头痛。 目前有以下几种手段来解决异步回调问题: 传统异步回调 Promise ES6 Generator ES7 async 远古 对于异步回调,相...

YanisWang
2015/11/11
1K
6

没有更多内容

加载失败,请刷新页面

加载更多

Qt程序打包发布方法(使用官方提供的windeployqt工具)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/toTheUnknown/article/details/81748179 如果使用到了Qt ...

shzwork
28分钟前
4
0
MainThreadSupport

MainThreadSupport EventBus 3.0 中的代码片段. org.greenrobot.eventbus.MainThreadSupport 定义一个接口,并给出默认实现类. 调用者可以在EventBus的构建者中替换该实现. public interface ...

马湖村第九后羿
48分钟前
3
0
指定要使用的形状来代替文字的显示

控制手机键盘弹出的功能只能在ios上实现,安卓是实现不了的,所以安卓只能使用type类型来控制键盘类型,例如你要弹出数字键盘就使用type="number",如果要弹出电话键盘就使用type="tel",但这...

前端老手
59分钟前
6
0
总结:Raft协议

一、Raft协议是什么? 分布式一致性算法。即解决分布式系统中各个副本数据一致性问题。 二、Raft的日志广播过程 发送日志到所有Followers(Raft中将非Leader节点称为Follower)。 Followers收...

浮躁的码农
今天
7
0
Flask-admin Model View字段介绍

Model View字段介绍 can_create = True 是否可以创建can_edit = True 是否可以编辑can_delete = True 是否可以删除list_template = 'admin/model/list.html' 修改显......

dillonxiao
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部