Vue 框架学习(九) Promise

参考视频：https://www.bilibili.com/video/BV15741177Eh?p=125

回调地狱

setTimeout(() => {
  console.log("Hello World");

  setTimeout(() => {
    console.log("Hello Vue");

    setTimeout(() => {
      console.log("Hello Python");
    }, 1000);
  }, 1000);
}, 1000);

View Code

Promise链式结构

new Promise((resolve, reject) => {
  // 第一次网络请求
  setTimeout(() => {
    resolve()
  }, 1000);
}).then(() => {
  // 第一次拿到结果的代码
  console.log("Hello World");
  console.log("Hello World");
  console.log("Hello World");
  console.log("Hello World");
  console.log("Hello World");

  return new Promise((resolve, reject) => {
    // 第二次网络请求
    setTimeout(() => {
      resolve()
    }, 1000);
  })
}).then(() => {

  // 第二次拿到结果的代码
  console.log("Hello Vue");
  console.log("Hello Vue");
  console.log("Hello Vue");
  console.log("Hello Vue");
  console.log("Hello Vue");

  return new Promise((resolve, reject) => {
    // 第三次网络请求
    setTimeout(() => {
      resolve()
    }, 1000);
  })
}).then(() => {

  // 第三次拿到结果的代码
  console.log("Hello Python");
  console.log("Hello Python");
  console.log("Hello Python");
  console.log("Hello Python");
  console.log("Hello Python");
})

View Code

Promise三种状态

1、基本使用（可直接看第四种）

<body>
  <script>
    // 参数->函数(resolve,reject)都是函数
    // 1、连式结构
    new Promise((resolve, reject) => {
      // 回调地狱
      // setTimeout(() => {
      //   console.log("Hello World");

      //   setTimeout(() => {
      //     console.log("Hello Vue");

      //     setTimeout(() => {
      //       console.log("Hello Python");
      //     }, 1000);
      //   }, 1000);
      // }, 1000);

      // 第一次网络请求
      setTimeout(() => {
        resolve()
      }, 1000);
    }).then(() => {

      // 第一次拿到结果的代码
      console.log("Hello World");
      console.log("Hello World");
      console.log("Hello World");
      console.log("Hello World");
      console.log("Hello World");

      return new Promise((resolve, reject) => {

        // 第二次网络请求
        setTimeout(() => {
          resolve()
        }, 1000);
      })

    }).then(() => {

      // 第二次拿到结果的代码
      console.log("Hello Vue");
      console.log("Hello Vue");
      console.log("Hello Vue");
      console.log("Hello Vue");
      console.log("Hello Vue");

      return new Promise((resolve, reject) => {

        // 第三次网络请求
        setTimeout(() => {
          resolve()
        }, 1000);
      })
    }).then(() => {

      // 第三次拿到结果的代码
      console.log("Hello Python");
      console.log("Hello Python");
      console.log("Hello Python");
      console.log("Hello Python");
      console.log("Hello Python");
    })

    // 2、
    // 网络请求:aaa -> 处理
    // 处理:aaa111 -> 处理
    // 处理:aaa222 -> 处理
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000);
    }).then(res => {
      // 1.第一次10行代码
      console.log(res, '第一层10行代码');

      // 2.对结果进行第一次处理
      // 只有resolve可省略reject
      return new Promise((resolve) => {
        resolve(res + '111')
      })
    }).then(res => {
      // 1.第二次10行代码
      console.log(res, '第二层10行代码');

      return new Promise((resolve) => {
        resolve(res + '222')
      })
    }).then(res => {
      console.log(res, '第三层10行代码');
    })


    // 3.第二种简写
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000);
    }).then(res => {
      // 1.第一次10行代码
      console.log(res, '第一层10行代码');

      // 2.对结果进行第一次处理
      return Promise.resolve(res + '111')
    }).then(res => {
      // 1.第二次10行代码
      console.log(res, '第二层10行代码');

      return Promise.resolve(res + '222')
    }).then(res => {
      console.log(res, '第三层10行代码');
    })

    // 4.简写
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('aaa')
      }, 1000);
    }).then(res => {
      // 1.第一次10行代码
      console.log(res, '第一层10行代码');

      // 2.对结果进行第一次处理
      // return res + '111'

      // 如果报错则在此层终止
      // return Promise.reject('error message')
      throw 'error message'
    }).then(res => {
      // 1.第二次10行代码
      console.log(res, '第二层10行代码');

      return res + '222'
    }).then(res => {
      console.log(res, '第三层10行代码');
    }).catch(err => {
      console.log(err);
    })
  </script>
</body>

View Code

2、race方法（多个请求中一个成功就返回）

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})

View Code

3、all方法（多个请求都成功才返回）

Promise.all([
  // 请求1
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: 'BlackAngel',
        age: 20
      })
    }, 1500);
  }),
  // 请求2
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        name: 'Smallstars',
        age: 18
      })
    }, 1000);
  })
]).then(results => {
  console.log(results);
})

View Code

每天进步一点点

相关阅读:
MYSQL数据库常用语句
 node.js（http协议）
web 后端规范与思想
 linux系统下开启一个简单的web服务
 linux基础学习之软件安装以及常用命令（三）
Vue如何使用动态刷新Echarts组件
 linux基础学习之软件安装以及常用命令
 linux基础学习
 浅谈FIle协议与Http协议及区别
 vueJs的简单入门以及基础语法
原文地址：https://www.cnblogs.com/smallstars/p/13536454.html