简析 promise

156 阅读1分钟

1.Promise是什么?

  • Promise是构造函数, 用于创建promise实例对象
  • 作用 : 解决回调地狱
  • 回调地狱 : 异步回调,层层嵌套
  • promise本质 不是控制 异步代码的执行顺序(无法控制) , 而是控制异步代码结果处理的顺序

2.Promise使用流程

2.1 创建Promise实例对象 :

    **let p = new Promise((resolve,reject)=>{})**

2.2 调用promise实例的then方法 :

   ** p.then( res=>{//成功} , err=>{//失败})**
  • 上代码

const fs = require('fs')

//(1)调用构造函数,创建promise实例对象
/**
* @description: 创建promise实例
* @param {function}   (resolve,reject)=>{
    resolve( 数据 ) : 成功
    reject( 错误信息 ) : 失败
} 
* @return: 
*/
const p = new Promise( (resolve,reject)=>{
    //异步操作
    fs.readFile(`${__dirname}/data/aaa.txt`, 'utf-8', (err, data) => {
        if (err) {
            //失败, 调用reject()
            reject(err)
        } else {
            //成功, 调用resolve()
            resolve(data)
        }
    })
} )

//(2)调用实例对象的then()方法
p.then( res=>{
    //成功回调
    console.log(res)
} , err=>{
    //失败回调
    console.log(err)
} )

  • 上示意图

前端刘傲波横向图解.jpg

3.Promise原理

**Promise本质是一个容器,其也是一个同步任务,真正异步的是它的两个回调resolve()和reject()**

3.1 Promise有三种工作状态

  • 进行中 pending
  • 已成功 fulfilled
  • 已失败 rejected

3.2 Promise状态切换只有两种情况

  • pending(进行中)变成fulfilled(已成功)
  • pending(进行中)变成rejected(已失败)

3.3 promise创建的时候里面的代码会立即执行

  • (1)不要在promise里面去处理异步结果
  • (2)而是执行promise的resolve与reject方法

3.4 promise解决回调地狱: 在上一个promise对象的then方法中返回 下一个promise对象

什么是回调地狱 : 异步回调 层层嵌套

    p1.then(res=>{ return p2 })
    .then( res=>{ } )
  • 上代码

const fs = require('fs')

//(1)调用构造函数,创建promise实例对象

//封装创建Promise对象的函数
function createPromise(name) {
    return new Promise((resolve, reject) => {
        fs.readFile(`${__dirname}/data/${name}.txt`, 'utf-8', (err, data) => {
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}

let p1 = createPromise('a')
let p2 = createPromise('b')
let p3 = createPromise('c')

//(2)调用then方法
p1
.then(res => {
    console.log(res)
    //在p1的then方法中返回p2
   return p2
})
.then(res=>{
    //这是p2的then
    console.log(res)
    return p3
})
.then(res=>{
    console.log(res)
})

4.promise其他用法

1.catch

**捕捉promise对象的异常错误信息**

  • 上代码

const fs = require('fs')

//(1)调用构造函数,创建promise实例对象

//封装创建Promise对象的函数
function createPromise(name) {
    return new Promise((resolve, reject) => {
        fs.readFile(`${__dirname}/data/${name}.txt`, 'utf-8', (err, data) => {
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}

let p1 = createPromise('a')
let p2 = createPromise('b')
let p3 = createPromise('c')

//(2)调用then方法
p1
.then(res => {
    console.log(res)
    //在p1的then方法中返回p2
   return p2
})
.then(res=>{
    //这是p2的then
    console.log(res)
    return p3
})
.then(res=>{
    console.log(res)
}).catch(err=>{
    //上面任何一个promise对象出现错误,都会执行catch
    console.log(err)
})

2.all

**将多个promise放入数组中合并成一个promise, 只有数组中所有的promise执行完毕才会执行then**

  • 上代码

const fs = require('fs')

//(1)调用构造函数,创建promise实例对象

//封装创建Promise对象的函数
function createPromise(name) {
    return new Promise((resolve, reject) => {
        fs.readFile(`${__dirname}/data/${name}.txt`, 'utf-8', (err, data) => {
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}

let p1 = createPromise('a')
let p2 = createPromise('b')
let p3 = createPromise('c')

// Promise.all( [p1,p2,p3] ) : 多个promise对象合并成一个
let pAll = Promise.all( [p1,p2,p3] )

//(2)调用then方法
pAll.then(res=>{
    //上面所有的promise全部都执行完毕,才会执行then
    console.log(res)
}).catch(err=>{
    console.log(err)
})

3.race

**将多个promise放入数组中合并成一个promise, 只要数组中任意promise执行完毕就会执行then**

  • 应用场景:电商抢购
  • 上代码

const fs = require('fs')

//(1)调用构造函数,创建promise实例对象

//封装创建Promise对象的函数
function createPromise(name) {
    return new Promise((resolve, reject) => {
        fs.readFile(`${__dirname}/data/${name}.txt`, 'utf-8', (err, data) => {
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}

let p1 = createPromise('a')
let p2 = createPromise('b')
let p3 = createPromise('c')

// Promise.race( [p1,p2,p3] ) : 任意一个promise走完即可
let pAll = Promise.race( [p1,p2,p3] )

//(2)调用then方法
pAll.then(res=>{
    //第一个走完的promise
    console.log(res)
}).catch(err=>{
    console.log(err)
})

5.async异步函数:解决异步任务无法控制执行顺序的问题

1. async异步函数 : 相当于 promise 的更高级写法

  • async关键字: 修饰 异步函数,让函数支持await
  • await关键字: 阻塞当前函数执行,等待promiseresolve()结果

2. async使用两个流程

  • 2.1 使用async关键字修饰函数: async function 函数名(){}
  • 2.2 在async函数中用await来执行promise : let res = await promise实例对象
  • 上代码

const fs = require('fs')

//创建promise对象函数
const readPromise = name => {
    return new Promise((resolve, reject) => {
        fs.readFile(`${__dirname}/data/${name}.txt`, 'utf-8', (err, data) => {
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}
/*异步函数使用流程 
(1)使用async关键字修饰函数 : 让这个函数内部可以识别await关键字
(2)使用await关键字调用 promise异步 , await的结果就是 promise内部的resolve()结果
*/
async function fn() {

    //res1就是await后面那个promise的then里面的res
    let res1 = await readPromise('a')
    console.log(res1)

    let res2 = await readPromise('b')
    console.log(res2)

    let res3 = await readPromise('c')
    console.log(res3)

}

fn()

6.后记

如果发现内有语句或逻辑混乱的地方,还请各路大神指正。

image.png