Promise solves asynchrony

A simple question , Show you Promise How to solve the asynchronous problem .

A case of reading files , The operating environment is node. The way to read the file is to use node Built-in module fs Inside readFile, This method itself is an asynchronous method , Of course, it also has synchronization methods , Here because of use Promise solve the problem , There is no need to synchronize .

Project directory

├─a.txt

├─b.txt

├─c.txt

├─fs.js

└package.json

a.txt,b.txt,c.txt The contents in are written 3 Secondary file name , such as

a.txt

aaa

stay fs.js Write and read the file code in the file

fs.readFile("./a.txt", "utf-8", (err, dataStr) => {
  if (err) {
    console.log(" Read failed ");
  } else {
    console.log(dataStr);
  }
})
fs.readFile("./b.txt", "utf-8", (err, dataStr) => {
  if (err) {
    console.log(" Read failed ");
  } else {
    console.log(dataStr);
  }
})
fs.readFile("./c.txt", "utf-8", (err, dataStr) => {
  if (err) {
    console.log(" Read failed ");
  } else {
    console.log(dataStr);
  }
})
​

This is the code we usually write , The order of output results depends entirely on Task queue The mood of the . I want my code to be my own , Output order ：aaa->bbb->ccc

Use callback function nesting callback function writing

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);
    })
  })
})
​

This output is OK , The order is aaa->bbb->ccc.

Have you found that the code is not easy to read ？ Or the code is not beautiful ？ It's not easy to maintain ？

This is the typical Back to hell Example , The code is not beautiful , It's not easy to read . It is also the programming method that our front-end developers try to avoid

Use Promise solve the problem

//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);
  })

Does this look much more comfortable ？Promise Its function is to transform the bad programming method of asynchronism into synchronous programming , Both elegant , And beautiful .