Promise详解:Promise解决ajax回调嵌套问题

目录

一、Promise是什么

二、回调地狱

三、Promise解决回调地狱的原理

四、promaise实例


一、Promise是什么

1、主要用于异步计算

2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果

4、可以在对象之间传递和操作promise,帮助我们处理队列

二、回调地狱

当一个回调函数嵌套一个回调函数的时候,就会出现一个嵌套结构,当嵌套的多了就会出现回调地狱的情况, 比如我们发送三个 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对象

复制代码
let p1 = new Promise(function (resolve, reject) {
    // 此处执行异步的代码
    setTimeout(()=>{
        // 我们可以根据自己的标准在异步任务完成的时候
        // 选择是执行失败的回调函数还是成功的回调函数
        // 第一个形参resolve 表示成功的回调
        resolve('300')
        // 第二个形参reject 表示失败的回调
    },3000)
})

// 定义当p1这个promise对象变成成功状态的时候要执行的回调函数
p1.then((data)=>{
    console.log("我是成功的时候执行的函数")
    console.log("我执行的时候你给我传入的参数",data)
})

// 定义当p1这个promise对象变成失败状态的时候要执行的回调函数
p1.catch((err)=>{
    console.log("我是失败的时候执行的函数")
    console.log("我执行的时候你给我传入的参数",err)
})

resolve 作用是,将Promise对象的状态从"未完成 "变为"成功"(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject 作用是,将Promise对象的状态从"未完成 "变为"失败"(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise是一个对象,这个对象有三个状态:

待定(pending):初始状态,既没有成功,也没有失败,表示异步任务正在进行中

成功(fulfilled):异步任务执行完毕,变成成功状态

失败(rejected):异步任务执行完毕,变成失败状态

当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;

promise状态一经改变,不会再变

Promise对象的状态改变,只有两种可能:

从pending变为fulfilled

从pending变为rejected

Promise对象这样就创建好了,下面来解决ajax回调地狱问题。

四、promaise实例

传统写法

复制代码
const fs = require("fs")
fs.readFile("./one.txt", (err, data1) => {
  fs.readFile("./two.txt", (err, data2) => {
    fs.readFile("./three.txt", (err, data3) => {
      console.log(data1 + "\n" + data2 + "\n" + data3)
    })
  })
})

Promise写法

复制代码
const fs = require("fs")

const p = new Promise((resolve, reject) => {
  fs.readFile("./one.txt", (err, data) => {
    resolve(data)
  })
})
p.then(value => {
  return new Promise((resolve, reject) => {
    fs.readFile("./two.txt", (err, data) => {
      resolve([value, data])
    })
  })
}).then(value => {
  return new Promise((resolve, reject) => {
    fs.readFile("./three.txt", (err, data) => {
      value.push(data)
      resolve(value)
    })
  })
}).then(value => {
  let str = value.join("\n")
  console.log(str)
})
相关推荐
用户21816970493013 小时前
Flutter(四)Dart语法 空安全 运算符 流程控制
前端
许彰午13 小时前
政务督办的分合模式:主办协办的并发审批
前端·javascript·政务
用户693717500138413 小时前
AI时代,程序员该往哪走?
前端·后端
ttwuai13 小时前
GoFrame 后台日志清空失败:无 WHERE 删除为什么被拦住
前端·golang
易筋紫容13 小时前
创建型模式:对象的诞生艺术
开发语言·前端·javascript
半句唐诗14 小时前
我是如何通过 Access Token 成功发布第一个 npm 包的
前端·npm·node.js
程序员黑豆14 小时前
鸿蒙应用开发:@Provider 与 @Consumer 跨组件双向同步详解
前端·harmonyos
paopaokaka_luck14 小时前
基于springboot3+vue3的智能文库平台(AI智能搜索、AI智能汇总、实时在线状态展示、多格式文档预览与富文本编辑、Echarts图形化分析)
前端·网络·spring boot·网络协议·echarts
牧艺14 小时前
cos-design PhotoAlbum:用 CSS 3D 做一个「能翻页」的实体相册
前端·css·交互设计
洪贺14 小时前
从原始采样到可缩放心电图:用 h5ECG 绘制自己的 ECG
前端