Promise 一： 基本问题

目录

1. Promise 是什么

理解

1. 抽象表达:

2. promise 的状态改变

3.promise 的基本流程

 4. promise 的基本使用

 2. 为什么要用 Promise?

 2.1. 指定回调函数的方式更加灵活

2.2. 支持链式调用, 可以解决回调地狱问题

3. 如何使用 Promise?

3.1. API

1. Promise 是什么

理解

1. 抽象表达:

    1) Promise 是一门新的技术(ES6 规范)

    2) Promise 是 JS 中进行异步编程的新解决方案

    备注：旧方案是单纯使用回调函数

2. 具体表达:

   1) 从语法上来说: Promise 是一个构造函数

   2) 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值

2. promise 的状态改变

1. pending 变为 resolved

2. pending 变为 rejected

说明: 只有这 2 种, 且一个 promise 对象只能改变一次

无论变为成功还是失败, 都会有一个结果数据

成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

3.promise 的基本流程

 4. promise 的基本使用

使用 1: 基本编码流程

 

使用 2: 使用 promise 封装基于定时器的异步

 

使用 3: 使用 promise 封装 ajax 异步请求

 

 2. 为什么要用 Promise?

 2.1. 指定回调函数的方式更加灵活

1. 旧的: 必须在启动异步任务前通过回调函数指定

Promise之前的旧方案都是使用回调函数完成异步编程的操作
1、fs 文件操作 如 NodeJS 

require('fs').requireFile('./index.html',(error,data)=>{})

2、数据库操作 如 MongoDB MySQL

3、 AJAX 网络请求

$.get('/server',(data)=>{})

4、定时器 setTimeout(()=>{},2000)

2. promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函

数(甚至可以在异步任务结束后指定/多个)

2.2. 支持链式调用, 可以解决回调地狱问题

1. 什么是回调地狱?

回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

比如我要说一句话，语序必须是下面这样的：武林要以和为贵，要讲武德，不要搞窝里斗。如果他们都是异步任务的话，必须进行以下操作，才能保证顺序正确：

    setTimeout(function () {  //第一层
        console.log('武林要以和为贵');
        setTimeout(function () {  //第二程
            console.log('要讲武德');
            setTimeout(function () {   //第三层
                console.log('不要搞窝里斗');
            }, 1000)
        }, 2000)
    }, 3000)

使用promise就可以解决这个问题

   function fn(str){
            var p=new Promise(function(resolve,reject){
                //处理异步任务
                var flag=true;
                setTimeout(function(){
                    if(flag){
                        resolve(str)
                    }
                    else{
                        reject('操作失败')
                    }
                })
            })
            return p;
        }

     fn('武林要以和为贵')
    .then((data)=>{
        console.log(data);
        return fn('要讲武德');
    })
    .then((data)=>{
        console.log(data);
        return fn('不要搞窝里斗')
    })
    .then((data)=>{
        console.log(data);
    })
    .catch((data)=>{
        console.log(data);
    })

2. 回调地狱的缺点?

不便于阅读

不便于异常处理

3. 解决方案?

promise 链式调用

4. 终极解决方案? 

async/await

3. 如何使用 Promise?

3.1. API

Promise 构造函数: Promise (excutor) {}

(1) executor 函数: 执行器 (resolve, reject) => {}

(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}

(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

Promise.prototype.then 方法: (onResolved, onRejected) => {}

(1) onResolved 函数: 成功的回调函数 (value) => {}

(2) onRejected 函数: 失败的回调函数 (reason) => {}

说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调

返回一个新的 promise 对象

Promise.prototype.catch 方法: (onRejected) => {}

(1) onRejected 函数: 失败的回调函数 (reason) => {}

说明: then()的语法糖, 相当于: then(undefined, onRejected)

Promise.resolve 方法: (value) => {}

(1) value: 成功的数据或 promise 对象

说明: 返回一个成功/失败的 promise 对象

Promise.reject 方法: (reason) => {}

(1) reason: 失败的原因

说明: 返回一个失败的 promise 对象

// 1.创建一个新的promise对象
const p = new Promise((resolve, reject) => {
  // 执行器函数 同步回调
  // 2.执行异步操作任务
  setTimeout(() => {
    const time = Date.now();
    // 如果当前时间是偶数代表成功，否则代表失败
    // 3.1 如果成功了，调用resolve(value)
    if (time % 2 == 0) {
      resolve("成功的数据, time=" + time);
    } else {
      // 3.2 如果失败了，调用reject(reason)
      reject("失败的数据, time=" + time);
    }
  });
}, 1000);

//如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
//如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果

p.then(
  (value) => {
    // 接收得到成功的value数据
    console.log("onResolved", value);
  },
  (reason) => {
    // 接收得到失败的reason数据
    console.log("onRejected", reason);
  }
);

 Promise.all 方法: (promises) => {}

(1) promises: 包含 n 个 promise 的数组

说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就

直接失败

 

        let p1 = new Promise((resolve, reject) => {
            resolve('OK');
        })
        // let p2 = Promise.resolve('Success');
        let p2 = Promise.reject('Error');
        let p3 = Promise.resolve('Oh Yeah');
        
        //
        const result = Promise.all([p1, p2, p3]);

        console.log(result); // Uncaught (in promise) Error
 

Promise.race 方法: (promises) => {}

(1) promises: 包含 n 个 promise 的数组

 race就是赛跑的意思，意思就是说， Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果(只有一个)， 不管结果本身是成功状态还是失败状态。

说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

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'
})