promise解决异步调用

1.promise 的使用场景和使用

function first() {
  let name = "小黑";
  return name;
}
function second() {
  let age = 18;
  return age;
}
console.log(`${first()}的岁数是${second()}`);

显而易见,以上执行结果为 小黑的岁数是18

下一步我们将之改造一下,让 second 变为一个异步执行

function first() {
  let name = "小黑";
  return name;
}
function second() {
  let age;
  setTimeout(() => {
    age = 18;
  });
  return age;
}
console.log(`${first()}的岁数是${second()}`);

结果也是显而易见的 小黑的岁数是undefined , 因为调用 second 的时候定时器在任务队列里还没执行完 push 到主线程里,所以想要正确执行必须要等 second 这个异步函数执行完毕再执行 first 函数,这个时候就用到了 promise

second 函数使用 promise:

function second() {
  return new Promise((resolve, reject) => {
    let age;
    setTimeout(() => {
      age = 18;
      resolve(age);
    });
  });
}
const secondPromise = second();

现在,我们打印一下结果: Promise { <pending> }, pending 代表着 promise 再等待中,未执行,然后我们执行一下

secondPromise.then((res) => {
  console.log(res); // 会打印 18
  consol.log(secondPromise); // 会打印 Promise { 18 }  这里promise执行了，状态是resolved
});

以上是 promise 执行成功，现在看一下 promise 执行失败,调用 reject

function second() {
  return new Promise((resolve, reject) => {
    let age;
    setTimeout(() => {
      age = 18;
      reject("promise执行失败");
    });
  });
}
const secondPromise = second();
secondPromise
  .then((res) => {
    // promise执行失败,不会进then
    console.log(res);
    consol.log(secondPromise);
  })
  .catch((err) => {
    // promise执行失败,进入catch
    console.log(err); // 打印 'promise执行失败', 状态是rejected
  });

由此可知,promise 拥有三个状态,分别是 pending(promise 未执行,不会进入 then 和 catch),resolved(promise 执行完毕),rejected(promise 执行出错)

完整的写法应该是：

function first() {
  let name = "小黑";
  return name;
}
function second() {
  return new Promise((resolve, reject) => {
    try {
      let age;
      setTimeout(() => {
        age = 18;
        resolve(age);
      });
    } catch (error) {
      reject(error);
    }
  });
}

const secondPromise = second();
console.log(secondPromise, "promise未执行");

secondPromise
  .then((res) => {
    console.log(`${first()}的岁数是${res}`);
    console.log(secondPromise, "promise执行完毕");
  })
  .catch((err) => {
    console.log(err, "promise执行出错");
  });

2.手写promise

手写promise

• 1.同步版 (关键点:三个状态 两个回调)

    // 三个状态
    const PENDING = 'pending'
    const RESOLVED = 'resolved'
    const REJECTED = 'rejected'

    // 构造函数
    function myPromise(fn){

        this.status = PENDING
        this.res = undefined
        this.err = undefined

        // 两个回调
        let resolve = function(value){
            this.status = RESOLVE
            this.res = value
        }

        let reject = function(error){
            this.status = REJECTED
            this.err = error
        }

        try{
            fn(resolve,reject)
        }catch(error){
            reject(error)
        }
    }

    // then
    myPromise.prototype.then = function(onResolve,onReject){
        if(this.status === RESOLEVED){
            onResolve(this.res)
        }
        if(this.status === REJECTED){
            onReject(this.err)
        }
    }