Promise的基本使用

一，简介

• Prpmise到底是什么？

  • Promise是异步编程的一种解决方案(是ES6中一个非常重要且好用的特性)
  • 可一优雅的方式解决回调地狱

• 什么情况下会用到Promise?

  • 一般情况下是有异步操作，使用Promise对这个异步操作进行封装

二，基本语法

  // 1.使用setTimeout
    // setTimeout(function() {      
    // },1000)
    
    // 异步操作
    // setTimeout(() => {
    //   console.log(‘setTimeout‘);
    // },1000)

    //            解决  ,  拒绝 
    // 参数->函数(resolve,reject)
    // resolve,reject 它们本身又是函数
    // 链式编程 
    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‘);
      console.log(‘Hello World‘);
      
      return 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‘);
      console.log(‘Hello World‘);

      return 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‘);
      console.log(‘Hello World‘);
      
    })

     new Promise((resolve,reject) => {
      setTimeout(() => {
        //成功的时候调用resolve
        // resolve(‘Hello World‘)

        // 失败的时候调用reject
        reject(‘error message‘)
      },1000)
    }).then((data) => {
      // 1.100行的处理代码
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      console.log(data);
      
    }).catch((err) => {
      // 调用reject的时候会把错误信息传到这里输出 
      console.log(err);
    })

三,promise的三种状态和另外的处理方式

Promise的另外理形式（不用catch,then里面传入两个参数）

  // 模拟的异步操作
    new Promise((resolve,reject) => {
      setTimeout(() => {
        // 请求成功
        resolve(‘Hello VueJs‘)
        // 请求失败
        reject(‘err message‘)
      },1000)
    }).then(data => {
      console.log(data);
    },err => {
      console.log(err);
    })

四，Promise的链式调用

new Promise((resolve => resolve(结果)))简写如下：

Promise.resolve(结果)

Promise的基本使用

原文：https://www.cnblogs.com/toprogram/p/12595316.html