从 回调地狱 到神奇的 promise

1.为什么会产生回调地狱
当我们需要在异步的末尾做一些事情的时候，我们就会用到回调函数。当回调函数嵌套过多的时候，我们的代码就没有可阅读性和可维护性，这种情况我们就称之为回调地狱。
2.promise
这个promise是es6的语法，是异步编程的一种解决方法，比传统的解决方法更强加，更合理。
3.promis的语法

let p1 = new Promise(function (resolve, reject) {})
	p1.then(function () {
    // 这个函数就是当你的 Promise 里面书写 resolve() 的时候，就会调用了
    console.log(123)
    })

这里的2个参数 ： 如果成功了，就是 resolve，成功之后执行函数p1.then()
如果失败了，就是 reject,失败之后执行的函数p1.catch()
4.promise的高级应用
当你在这个 function 里面 return 一个新的 promise 对象的时候
可以继续.then() ，以ajax的请求计算sum为例：

new Promise(function (resolve) {
      ajax({
        url: './ajax1.php',
        data: {
          a: 100,
          b: 200
        },
        dataType: 'json',
        success: function (result) {
          resolve(result)
        }
      })
    })
    .then(function (res) {
      console.log(res) // 第一次请求的结果

      return new Promise(function (resolve) {
        ajax({
          url: './ajax2.php',
          data: res,
          dataType: 'json',
          success: function (result) {
            resolve(result)
          }
        })
      })
    })
    .then(function (res) {
      console.log(res)
      }

5.回调地狱的终极解决办法
就是想一个办法把异步代码写的 看起来像 同步代码
会用到es7的语法：async/await 函数

语法：
1> async 是一个关键字 要写在函数的前面
async function fn() {}
let fn = async () => {}
2> await 也是一个关键字 要写在函数的里面
await 关键字有一个作用，就是可以把 promise 本该再 then 里面接受的结果
直接再 await 前面定义一个变量来接受；
await 会把后面那个 promise 对象当作一个等待的对象；
await 后面行的代码会等到这个 promise 执行完毕以后再继续；

	async function fn() {
    console.log('start')
    
    let res = await new Promise(function (resolve, reject) {
         setTimeout(function () {
           resolve(123)
        }, 1000)
       })

       console.log(res)

      console.log('end')
     }

     fn()

上面的这个代码会先打印 strat，再打印end ，最后打印 res

来源：CSDN

作者：suncnx

链接：https://blog.csdn.net/suncnx/article/details/104903372