Promise的基础用法

一、Promise的起因

当项目有需求时，需要封装一个方法，给一个要读取文件的路径，使用这个方法去读取文件并把内容返回。
例：在一个file文件夹里有三个文档，需要将里面内容读取出来

文件结构

分别在1，2，3文件里保存111，222，333，然后创建js文件

1.普通读取文件的方式

const fs = require('fs')
const path = require('path')

fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => {
    if (err) throw err
    console.log(dataStr)   //111
})

结果输出111


普通读取文件结果

2.利用异步方式读取文件

a.利用return

function getFileByPath(fpath, callback) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
      if (err) throw(err)
      return dataStr
    })
}

var result = getFileByPath(path.join(__dirname, './files/1.txt'))
console.log(result)  //undefined

结果如下：


结果

原因：此时return没有在主函数内部，一个方法没有return，这个方法默认返回undefined

b.利用callback

function getFileByPath(fpath, callback) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
      if (err) throw(err)
      callback(dataStr)
    })
}

getFileByPath(path.join(__dirname, './files/1.txt'), (err, dataStr) => {
     console.log('callback调用的方法-----'+dataStr)
  })

结果输出为：


callback方法调用函数结果输出
A.callback对异常结果的处理

我们可以规定： callback 中，有两个参数；第一个参数，是 失败的结果；第二个参数是成功的结果；
如果成功了，返回的结果，应该位于 callback 参数的第二个位置，此时， 第一个位置 由于没有出错，所以，放一个 null；
如果失败了，则 第一个位置放 Error对象，第二个位置放置一个 undefined

function getFileByPath(fpath, callback) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {
      if (err) return callback(err)
      callback(null, dataStr)
    })
}
getFileByPath(path.join(__dirname, './files/1.txt'), (err, dataStr) => {
    if (err) return console.log(err.message)
    console.log(dataStr)//111
  })

结果输出111
若路径错误的话，结果输出

ENOENT: no such file or directory, open

B.定义两个callback将正确的路径和错误的路径分开
const fs = require('fs')
const path = require('path')

//定义两个callback将正确的路径和错误的路径分开
function getFileByPath(fpath, succCb, errCb) {
  fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err) return errCb(err)
    succCb(dataStr)
  })
}

 getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {
    console.log(data + '成功了！！！')
 }, function (err) {
   console.log('失败的结果，我们使用失败的回调处理了一下：' + err.message)
 })

当路径正确时：


路径正确

当路径错误时：


路径错误时
C.当出现需求时：先读取文件1，再读取文件2，最后再读取文件3
const fs = require('fs')
const path = require('path')

function getFileByPath(fpath, succCb, errCb) {
  fs.readFile(fpath, 'utf-8', (err, dataStr) => {
    if (err) return errCb(err)
    succCb(dataStr)
  })
}
getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {
    console.log(data)
  
    getFileByPath(path.join(__dirname, './files/2.txt'), function (data) {
      console.log(data)
  
      getFileByPath(path.join(__dirname, './files/3.txt'), function (data) {
        console.log(data)
      })
    })
})

结果如下：


回调结果

当出现回调地狱时，可以利用ES6的promise来解决

二、promise的基本介绍

本质：是单纯的为了解决回调地狱问题；并不能帮我们减少代码量；
将回调地狱的调用关系，改变为串联关系
1. Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以 new Promise() 得到一个 Promise 的实例；
2. 在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）
3.在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法
4. Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
5.既然 Promise 创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：
- 5.1 状态1： 异步执行成功了，需要在内部调用 成功的回调函数 resolve 把结果返回给调用者；
- 5.2 状态2： 异步执行失败了，需要在内部调用 失败的回调函数 reject 把结果返回给调用者；
- 5.3 由于 Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把 成功 或 失败的结果，返回给调用者；
6. 我们可以在 new 出来的 Promise 实例上，调用 .then() 方法，【预先】 为 这个 Promise 异步操作，指定 成功（resolve） 和 失败（reject） 回调函数；

1.形式上和具体的promise异步操作的区别

注意：这里 new 出来的 promise， 只是代表 【形式上】的一个异步操作；
什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是做什么具体的异步事情，目前还不清楚

// 这是一个具体的异步操作，其中，使用 function 指定一个具体的异步操作
var promise = new Promise(function(){
  // 这个 function 内部写的就是具体的异步操作！！！
})

2.创建一个具体的异步操作

const fs = require('fs')
var promise = new Promise(function () {
    fs.readFile('./files/2.txt', 'utf-8', (err, dataStr) => {
      if (err) throw err
      console.log(dataStr)  //222
    })
})

注意：每当 new 一个 Promise 实例的时候，就会立即执行这个异步操作中的代码；即，当前操作会立即执行
也就是说，new 的时候，除了能够得到 一个 promise 实例之外，还会立即调用 我们为 Promise 构造函数传递的那个 function，执行这个 function 中的 异步操作代码；

3.利用函数封装，之后再进行调用

使promise不用立即执行

function getFileByPath(fpath) {
    var promise = new Promise(function () {
      fs.readFile(fpath, 'utf-8', (err, dataStr) => {
  
        if (err) throw err
        console.log(dataStr)
  
      })
    })
}
getFileByPath('./files/2.txt')  //222

三、通过.then指定成功或失败的回调

function getFileByPath(fpath) {
    return new Promise(function (resolve, reject) {
      fs.readFile(fpath, 'utf-8', (err, dataStr) => {
  
        if (err) return reject(err)
        resolve(dataStr)
  
      })
    })
  }
  
   getFileByPath('./files/2.txt')
    .then(function (data) {
      console.log(data) //222
    }, function (err) {
      console.log(err.message)
    })

不管是成功还是失败都会返回读取到的内容

1.解决回调地狱

需求：先读取文件1，在读取2，最后读取3
注意：通过 .then 指定 回调函数的时候，成功的回调函数，必须传，但是，失败的回调，可以省略不传

const fs = require('fs')

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}
//错误示范
getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)

    getFileByPath('./files/2.txt')
      .then(function (data) {
        console.log(data)

        getFileByPath('./files/3.txt')
          .then(function (data) {
            console.log(data)
          })
      })
  })

这是一个错误示范

正确做法：

在上一个 .then 中，返回一个新的 promise 实例，可以继续用下一个 .then 来处理

const fs = require('fs')

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}
//正确做法
getFileByPath('./files/1.txt')
.then(function (data) {
  console.log(data)

  // 读取文件2
  return getFileByPath('./files/2.txt')
})
.then(function (data) {
  console.log(data)

  return getFileByPath('./files/3.txt')
})
.then(function (data) {
  console.log(data)
})

结果如下：


.then调用结果如下

四、捕获异常的两种方式

1.如果前面的 Promise 执行失败，我们不想让后续的Promise 操作被终止，可以为每个 promise 指定失败的回调

如果前面的 Promise 执行失败了，但是不要影响后续 promise 的正常执行，此时，我们可以单独为 每个 promise，通过 .then 指定一下失败的回调

const fs = require('fs')

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}

getFileByPath('./files/11.txt')
  .then(function (data) {
    console.log(data)

    // 读取文件2
    return getFileByPath('./files/2.txt')
  }, function (err) {
    console.log('这是失败的结果：' + err.message)
    // return 一个 新的 Promise
    return getFileByPath('./files/2.txt')
  })
  .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  }).then(function (data) {
    console.log(data)
  }) 

 console.log('OKOKOK')

结果如下：


方式一

2.利用catch去处理promise抛出的异常

如果 后续的Promise 执行，依赖于 前面 Promise 执行的结果，如果前面的失败了，则后面的就没有继续执行下去的意义了，此时，我们想要实现，一旦有报错，则立即终止所有 Promise的执行；

const fs = require('fs')

function getFileByPath(fpath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
      resolve(dataStr)

    })
  })
}
//catch处理异常
getFileByPath('./files/1.txt')
  .then(function (data) {
    console.log(data)

    // 读取文件2
    return getFileByPath('./files/22.txt')
  })
  .then(function (data) {
    console.log(data)

    return getFileByPath('./files/3.txt')
  })
  .then(function (data) {
    console.log(data)
  })
  .catch(function (err) {     console.log('这是自己的处理方式：' + err.message)
  })

catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并马上进入 catch 去处理 Promise中 抛出的异常；

五、JQuery中Ajax使用promise指定成功的回调函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <input type="button" value="获取数据" id="btn">

  <script src="./node_modules/jquery/dist/jquery.min.js"></script>

  <script>
    $(function () {
      $('#btn').on('click', function () {
        $.ajax({
          url: './data.json',
          type: 'get',
          dataType: 'json'
        })
          .then(function (data) {
            console.log(data)
          })
      })
    });
  </script>
</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345

推荐阅读更多精彩内容