Promise简单使用

简介: Promise简单使用

什么是promise?


首先我们来看一个小案例


data文件夹下是三个文件,我们要写一个代码分别依次读取三个文件,使得按照 abc 的顺序输出



无法保证输出顺序的代码


fs.readFile('./data/a.txt', 'utf8', function (err, data) {
  if (err) {
    // 抛出异常
    //    1. 阻止程序的执行
    //    2. 把错误消息打印到控制台
    throw err
  }
  console.log(data)
})
fs.readFile('./data/b.txt', 'utf8', function (err, data) {
  if (err) {
    throw err
  }
  console.log(data)
})
fs.readFile('./data/c.txt', 'utf8', function (err, data) {
  if (err) {
    throw err
  }
  console.log(data)
})


这样写无法保证文件内容输出的顺序,应为读取文件函数为异步函数,那么如何解决这样的问题呢?


首先我们可以想到用嵌套的方法,后输出的放在代码最内部,先输出的放在代码最外部,但是这样一层层的嵌套使用,几个异步函数还好,当函数很多时就会显得非常不美观,而且不容易修改,还会产生一系列问题,这就产生了下面的回调地狱问题


回调地狱(callback hell)


下图代码就是回调地狱的一种,是不是像冲击波一样冲击着广大程序员的幼小的心灵。(豪油根~~~)



var fs = require('fs')
fs.readFile('./data/a.txt', 'utf8', function (err, data) {
  if (err) {
    throw err
  }
  console.log(data)
  fs.readFile('./data/b.txt', 'utf8', function (err, data) {
    if (err) {
      throw err
    }
    console.log(data)
    fs.readFile('./data/c.txt', 'utf8', function (err, data) {
      if (err) {
        throw err
      }
      console.log(data)
    })
  })
})


接下来我们用 ES6新增的Promise来解决回调地狱问题


Promise解决


当 p1 读取成功的时候


当前函数中 return 的结果就可以在后面的 then 中 function 接收到


  • 当你 return 123 后面就接收到 123


  • return ‘hello’ 后面就接收到 ‘hello’


  • 没有 return 后面收到的就是 undefined


上面那些 return 的数据其实是没什么der用的


真正有用的是:我们可以 return 一个 Promise 对象


当 return 一个 Promise 对象的时候,后续的 then 中的 方法的第一个参数会作为 p2 的 resolve


var fs = require('fs')
var p1 = new Promise(function (resolve, reject) {
  fs.readFile('./data/a.txt', 'utf8', function (err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})
var p2 = new Promise(function (resolve, reject) {
  fs.readFile('./data/b.txt', 'utf8', function (err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})
var p3 = new Promise(function (resolve, reject) {
  fs.readFile('./data/c.txt', 'utf8', function (err, data) {
    if (err) {
      reject(err)
    } else {
      resolve(data)
    }
  })
})
p1
  .then(function (data) {
    console.log(data)
    return p2
  }, function (err) {
    console.log('读取文件失败了', err)
  })
  .then(function (data) {
    console.log(data)
    return p3
  })
  .then(function (data) {
    console.log(data)
    console.log('end')
  })
相关文章
|
2月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
26 4
|
5月前
|
前端开发 JavaScript
使用promise解决异步请求的用法
使用promise解决异步请求的用法
36 0
|
9月前
|
前端开发 API
Promise(简介、基本使用、API、手写实现 Promise、async与await)(二)
Promise(简介、基本使用、API、手写实现 Promise、async与await)(二)
|
9月前
|
前端开发 JavaScript API
Promise(简介、基本使用、API、手写实现 Promise、async与await)(一)
Promise(简介、基本使用、API、手写实现 Promise、async与await)
|
9月前
|
前端开发 API
Promise(简介、基本使用、API、手写实现 Promise、async与await)(三)
Promise(简介、基本使用、API、手写实现 Promise、async与await)(三)
|
9月前
|
前端开发 API
Promise(简介、基本使用、API、手写实现 Promise、async与await)(四)
Promise(简介、基本使用、API、手写实现 Promise、async与await)(四)
|
9月前
|
前端开发 API
Promise(简介、基本使用、API、手写实现 Promise、async与await)(六)
Promise(简介、基本使用、API、手写实现 Promise、async与await)(六)
|
9月前
|
前端开发 API
Promise(简介、基本使用、API、手写实现 Promise、async与await)(五)
Promise(简介、基本使用、API、手写实现 Promise、async与await)(五)
|
10月前
|
前端开发
Promise是什么?怎么用?
Promise 是一种异步编程的解决方案。它可以使异步操作更加清晰、简单、优雅,避免了回调地狱的问题。Promise 对象表示一个异步操作的最终完成或失败,并且它的最终状态(完成或失败)和返回值(或错误)不依赖于调用它的代码。
|
前端开发
前端学习案例7-promise-aysnc,await之2
前端学习案例7-promise-aysnc,await之2
43 0
前端学习案例7-promise-aysnc,await之2