Promise（异步与同步）

Promise（异步与同步）

一、异步与同步

• 现实世界中同步与异步操作

• 软件世界

  • 同步操作
    • 当一个操作开始执行后，主程序需等待它完成，才能继续向下执行
  • 异步操作
    • 当一个操作开始执行后，主程序无需等待它的完成，可以继续向下执行。此时该操作可以跟主程序同时(并发)执行

• 示例-文件操作

  

  

• 示例-Ajax异步网络请求

问题：异步任务完成后返回结果处理问题？

解决办法：回调函数（回调函数可以解决异步任务问题）

二、回调函数

function callBack(){
    console.log('执行callBack')
}
function fun(cb){
    cb()
}
function(callBack)

将函数callBack作为参数传递给fun，在函数fun中以参数方式进行调用，函数callBack就简称为回调函数

解决异步编程问题，处理异步操作完成后结果

三、Promise介绍

• Promise是异步编程的一种更优雅的解决方案，比传统的解决方案——回调函数——更合理，更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise对象
• 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说，Promise是一个对象，从它可以获得异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理
• 简单的理解为：Promise是对异步操作的封装，封装异步文件读写，ajax异步网络请求

四、Promise对象特点

1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending(进行中)、fulfilled(已成功)、和rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。 只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为resolved(已定型)

五、基本用法

let promise = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
       resolve(value)
}else{
    reject(error)
}
})

以异步读取文件为例

1. 封装异步读取文件promise对象

let promiseObj = new Promise((resolve,reject) =>{
    //具体异步操作
    fs.readFile(path,(err,data) =>{
        if(err){
            reject(err)
        }else{
            resolve(data)
        }
    })
})

2. 处理异步文件读取成功&失败的结果

promiseObj.then((result) =>{
    console.log(`result:${result}`)
})
promiseObj.catch((err) =>{
    console.log(`err:${err}`)
})

//链式写法
promiseObj.then((result) =>{
    console.log(`result:${result}`)
}).catch((err) =>{
    console.log(`err:${err}`)
})

六、回调函数嵌套问题—回调地狱

异步读取文件

const fs = require('fs')
fs.readFile('file.txt',(err,data) =>{
    if(err){
        throw new Error('读取数据出错')
    }
    console.log(data)
})

要读取三个文件，第一个文件读取完成后，在读取第二个文件，然后再是第三个文件，这时引起回调函数层层嵌套问题

发送三个ajax请求

• 第一个正常发送

• 第二个请求需要第一个请求的结果中的某一个值作为参数

• 第三个请求需要第二个请求的结果中的某一个值作为参数

   ajax({
          url: '我是第一个请求',
          success(res) {
              ajax({
                  //现在发送第二个请求
                  url: '我是第二个请求',
                  data: {a: res.a, b: res.b},
                  success(res2) {
                      //进行第三个请求
                      ajax({
                          url: '我是第三个请求',
                          data: {a: res2.a, b: res2.b},
                          success(res3) {
                              console.log(res3)
                          }
                      })
                  }
              })
          }
      })
  

  回调地狱，其实就是回调函数嵌套过多导致的

  

七、Promise链式调用

promise解决回调嵌套问题

promise封装ajax

封装promise

调用

异步读取多个文件

异步读取文件封装为函数