前端 js 之 promise（第一版 23.11.18） 09

news2024/11/24 12:04:51

感觉自己好笨，知识点表达的不够明晰，也正是因为如此，说明有很大的进步空间，更要在此努力！

文章目录

前言
一、作用
二、使用步骤
三、promise 类
四、promise 方法

前言

每一个新技术的出现，都是解决原有技术上的某一个痛点，直入主题，我们今天来看下promise的作用

一、作用

假设我们用定时器模拟一个接口，假设url是争取的我们就表示请求成功，否则失败，大概2s后会告诉我们接口请求的结果。

我们调用一个函数，这个函数中发送网络请求（我们可以用定时器来模拟）；
如果发送网络请求成功了，那么告知调用者发送成功，并且将相关数据返回过去；
如果发送网络请求失败了，那么告知调用者发送失败，并且告知错误信息；

	function requestData(){
      setTimeout((()=>{
        if(url==='dkjfdkf'){
          successCallback('返回成功的回调')
        }else{
          errorCallback('返回失败的回调')
        }
      })，2000)
     },

假设可能判断是否成功的条件有以下：

 
 function requestData(){
  setTimeout((()=>{
    if(url==='dkjfdkf'){
      let result1 = successCallback('返回成功的结果')
      if(result1==true){
        let result2 = successCallback('返回成功的结果')
        if(result2 ==true){
          successCallback('返回成功的回调')
        }
      }
    }else{
      errorCallback('返回失败的回调')
    }
  })，2000)
},

因为异步操作什么时候返回结果是不可控的，如果要按顺序来请求，就只能将这些操作嵌套起来，如果回调函数嵌套过多，中间有一个回调函数发生错误可能结果就错了，而且很难排查是哪个回调函数发生了错误，代码就很难维护而且难以阅读。当我们需要处理多个异步操作时，我们可以使用promise,

promise 异步编成的一种解决方式，它将异步操作封装一个promise 类，通过链式调用的方式来处理多个异步操作，避免了回调地狱问题
还有一种方式，async/await ，可以让异步代码看起来像同步代码，它是基于promise实现的
回调地狱是指在异步编程中，回调函数嵌套过多，导致代码难以维护和阅读的情况。

二、使用步骤

Promise是一个类，通过 new 创建一个Promise对象，会传入一个回调函数，这个回调函数有两个参数，resolve和reject , 这个回调函数会立即执行，调用resolve回调会执行.then方法，调用reject回调时，会执行Promise对象的catch方法

	const pro = new Promise((resolve,reject)=>{
	   if(网络请求成功){  
	     resolve('成功')
	   }else{
	     reject('失败')
	   }
	})
	
	pro.then(res=>{
	  //   执行resolve
	})
	pro.catch(res=>{
	  //   执行resolve
	})

上面Promise使用过程，我们可以将它划分成三个状态：
待定（pending）: 初始状态，既没有被兑现，也没有被拒绝；new promise 的回调函数里
已兑现（fulfilled）: 意味着操作成功完成； resolve回调
已拒绝（rejected）: 意味着操作失败；reject 回调
一旦状态被确定下来，Promise的状态会被锁死，该Promise的状态是不可更改的
如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数；如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原Promise的状态：

三、promise 类

我们都知道，promise 是通过new的方式创建出来的，那说明promise是一个类，

console.log(Promise.prototype)   // 打印不出来，因为内部方法都是不可枚举
console.log(Object.getOwnPropertyDescriptor(Promise.prototype))  // 发现then catch all

在这里插入图片描述

我们模拟下promise 的 then方法，promise是一个类，默认一进来就会走constructor里的方法，接收一个回调函数，并是立即执行的回调函数, 回调函数里两个函数，如果使用then 的方法，就会把then方法传进来的回调函数临时保存起来，promise内部就是就是各种回调函数各种调

class Promise(){
  constructor(executor){
    const resolve=()=>{
      this.callback()
    }
    const reject=()=>{

    }
    executor（resolve，reject）
  }
  then(callback){
    this.callback=callback
  }
}

const promise = new Promise((resolve,reject)=>{})  // promise里的箭头函数就相当于executor