Promise解决异步

一个简单问题，带你体会Promise是如何解决异步问题。

一个读取文件的案例，运行环境是node。读取文件的方法是用node内置模块fs里的readFile，这个方法本身就是一个异步方法，当然它也有同步方法，这里因为用Promise解决问题，就不用同步方法了。

项目目录

├─a.txt

├─b.txt

├─c.txt

├─fs.js

└package.json

a.txt，b.txt，c.txt里的内容均是书写3次文件名，比如

a.txt

aaa
1

在fs.js文件中书写读取文件代码

fs.readFile("./a.txt", "utf-8", (err, dataStr) => {
  if (err) {
    console.log("读取失败");
  } else {
    console.log(dataStr);
  }
})
fs.readFile("./b.txt", "utf-8", (err, dataStr) => {
  if (err) {
    console.log("读取失败");
  } else {
    console.log(dataStr);
  }
})
fs.readFile("./c.txt", "utf-8", (err, dataStr) => {
  if (err) {
    console.log("读取失败");
  } else {
    console.log(dataStr);
  }
})
​
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这种就是咱们平常写出来的代码，输出结果的顺序完全看任务队列的心情。我想要我的代码我做主，输出顺序：aaa->bbb->ccc

使用回调函数嵌套回调函数写法

fs.readFile("./a.txt", "utf-8", (err, dataStr) => {
  if (err) {
    return console.log(err.message);
  }
  console.log(dataStr);
  fs.readFile("./b.txt", "utf-8", (err, dataStr) => {
    if (err) {
      return console.log(err.message);
    }
    console.log(dataStr);
    fs.readFile("./c.txt", "utf-8", (err, dataStr) => {
      if (err) {
        return console.log(err.message);
      }
      console.log(dataStr);
    })
  })
})
​
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这种输出没问题了，顺序就是aaa->bbb->ccc.

大家有没有发现代码不太好读了？或者说代码不美观了？不好维护了？

这种就是典型的回调地狱的例子，代码不美观，不好读。也是我们前端开发人员尽力避免的编程方式

使用Promise解决问题

//promise
var p = function (url) {
  return new Promise((reslove, reject) => {
    fs.readFile(url, "utf-8", (err, dataStr) => {
      if (err) {
        reject(err.message)
      }
      reslove(dataStr)
    })
  })
}
​
p("./a.txt")
  .then((data) => {
    console.log(data);
    return p("./b.txt")
  })
  .then((data) => {
    console.log(data);
    return p("./c.txt")
  })
  .then((data) => {
    console.log(data);
  })
  .catch((msg) => {
    console.log(msg);
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

这样是不是看起来舒服多了？Promise的作用就是把异步这种不好的编程方式转变成同步编程，既优雅，又美观。