Promise的基本用法以及作用

1- 初识Promise

promise是一个 es6 的语法

在介绍promise前，先来了解一下什么是回调函数 callback

把一个函数当作参数传递到另一个函数里面,在另一个函数里面 通过参数的形式来调用
	
  function a() {
   }  //函数a
  
  function b(cb) {
    // cb 形参接受的是 函数 a 的地址
    cb() // cb 调用的时候就是在调用 a 函数
  }
  
  b(a) //将函数a以参数的形式传给b

    + 一般情况，我们不需要回调函数
    + 假如你需要在异步的末尾做一些事情的时候，我们使用回调函数的形式
    + （一件事情做完后需要做另一件事情的时候，需要以回调的方式实现）

  例子：
    + 前提： 你同一个时间只能做一个事情
    + 我需要你帮我买一个报纸
    + 我还需要你帮我买完报纸以后再买一个水
    + 在你出发去买报纸的时候给你一个锦囊
    + 这个锦囊就是在你出发去买报纸这个事情的时候传递进去的回调函数

// gohome 回家的函数
// playgame 玩游戏的函数
function gohome(cb) {
   
  // cb 接受的就是你调用 gohome 的时候传递进来的那个函数
  // 现在 cb  =>  playgame
  // 当你调用 cb 的时候，就是在调用那个 playgame 函数
  setTimeout(() => {
   
    console.log('到家了')
    
    cb() // 以参数的形式来调用第二个事情

    // 相当于 playgame()
  }, 2000)
}

// 我想让玩游戏这个事情再到家之后再开始执行
// 1. 就是把这个函数放在定时器里面一起执行
// 2. 就是以回调函数的形式来调用这个 playgame 行为
function playgame() {
   
  console.log('玩游戏')
}

console.log('script start')

// 现在出现的问题就是因为 setTimeout 是异步执行的
// 我是先把 playgame 这个事情完成了，然后才开始执行异步代码 到家了
gohome(playgame)
// playgame()
console.log('script end')

控制台打印顺序：
	script start
	script end
	到家了
	玩游戏
	
当代码按顺序执行下来时：
// 1.会先执行console.log('script start')，
// 2.再往下走，到gohome(playgame)的时候，发现gohome是异步的，所以会先放着，继续执行后面的，
// 3.当执行完console.log('script end')后，再去回过头来执行gohome，
// 4.当进入函数后，先执行console.log('到家了')，再继续执行下面的 cb()， 
// 5.这时cb()形参调用相当于调用playgame()，然后打印console.log('玩游戏')

2- 回调地狱的引发

  + 当回调函数和嵌套内容太多的时候
  + 我们的代码没有可阅读性和可维护性

  + 需求
    1. 发送一个 ajax 请求，请求一个数据回来，包含两个成员分别是两个数字
    2. 再次发送一个 ajax 请求，需要携带第一个请求得到两个数字
      + 返回的时两个数字的和，和另一个数字
    3. 再次发送一个 ajax 请求，需要携带第二个请求得到到的两个数字
      + 返回的是两个数字的乘积

  + 先发送 ajax 请求
  + 拿到结果 res
    + 再拿到结果 res 以后
    + 再次发送请求，携带参数就是 res
    + 拿到结果 res2
      + 在拿到 res2 以后
      + 再次发送请求，携带的参数就是 res2
      + 拿到结果 res3

多次ajax请求，就会形成回调地狱————解决方法：promise

ajax({
   
    url:"./server/01.php",
    success:function(res1){
   
        console.log(res1);
        ajax({
   
            url:"./server/02.php",
            data:res1,  // 参数为上一个ajax返回的数据;
            success:function(res2){
   
                console.log(res2);
                ajax({
   
                    url: "./server/03.php",
                    data: res2,  // 参数为上一个ajax返回的数据;
                    success: function (res3) {
   
                        console.log