快过年了, 大家新年好。

我今天刚好有时间, 在群里面老有人问 一些vue 什么的配置 请求配置什么的

其实其中大部分问题的核心 就是promise

简绍

像知道promise 那么有些 关键词也得了解一下。

一、 同步异步 什么是同步异步呢?

害! 别的语言我不是特别了解, 但在js中 有一个代码执行顺序,

正常代码 是由上而下的执行代码 (一下代码只为证明代码是自上而下执行的)

代码1 代码如下

// 简单一般代码
let name = "my name is ";
console.log('Print out my name after 6 counts')
console.log('6个数后打印出我的名字')
for(let i = 0; i < 6; i++) {
   	console.log(i)
    if (i > 3) {
    name += "Dwp"
  }
}
console.log(name)
console.log("代码执行 over")

// 执行结果:
// Print out my name after 6 counts
// 6个数后打印出我的名字
// 0
// 1
// 2
// 3
// 4
// 5
// my name is Dwp
// 代码执行 over

我们写这些简单代码的时候貌似没啥问题,那我现在又碰到一个需求 数6秒后打印出我的名字

代码2 代码如下

// 有异步操作的代码
let name = "my name is";
console.log("数6秒后打印出我的名字");
let s = 1;
let time = setInterval(() => {
  console.log(s + "秒");
  s++;
  if (s > 6) {
    name += "Dwp"
    clearInterval(time);
  }
});

console.log(name);
console.log("代码执行 over");

// 执行结果:
// 数6秒后打印出我的名字
// my name is         <= 注意这里
// 代码执行 over      
// 1秒
// 2秒
// 3秒
// 4秒
// 5秒
// 6秒

这个代码就奇怪了, 前面不是说代码是 自上而下执行的嘛,
为什么代码执行 over 这个不应该最后才执行吗?

这个 !!!(难道是博主在撒谎, 那么他的目的是什么?) 细思极恐

在这里插入图片描述

这个时候我再来讲 同步异步 那么是不是就知道这个是这么回事了啊。

代码1 就是 所谓的同步代码

代码2 就是 所谓的异步代码

异步代码就是 使用异步的方法, 得到异步的效果就是异步代码。
异步代码有: 定时器, 请求, 存储文件, 读取文件等等…

二、 这个时候还是不能直接讲promise, 那还要讲什么呢?函数 ! 回调函数。

这个个时候 我们 假装 还不知道 promise , 我们该怎么将异步代码 的执行顺序强行改成 同步代码 呢?

// 将异步代码 改成同步代码
let name = "my name is ";
console.log("数6秒后打印出我的名字");

function fun(data, resolve, reject) {
  if (true) {
    let s = 1;
    let time = setInterval(() => {
      console.log(s + "秒");
      s++;
      if (s > 6) {
        name += "Dwp";  
        resolve(name);
        clearInterval(time);
      }
    }, 1000);
  } else {
    reject(name);
  }
}

function funRes(name) {
  console.log(name);
  console.log("代码执行 over");
}

function funRej(name) {
  console.log(name);
  console.log("你骗我 我知道你叫Dwp!!");
  console.log("代码执行 over");
}

fun(name, funRes, funRej);

// 执行结果
// 数6秒后打印出我的名字
// 1秒
// 2秒
// 3秒
// 4秒
// 5秒
// 6秒
// my name is Dwp
// 代码执行 over

这个时候, 大家就会发现, 回调函数实现代码同步, 就是在异步代码块中调用的函数而已啊。

呃呃呃, 你可真是个小机灵鬼。 确实就是这样的。

但是这个代码多了就看着很烦。

要是异步中再套异步, 这样一直套娃, 就更烦了。

最终就形成了我们常说的 回调地狱

???: 博主讲的都是啥啊, 看着费劲。 看了这么久 我都没看到一句 promise 代码。
???: 对! 垃圾博客, 毁我青春!

???:别急, 博主不是后面 补充了嘛。

害! 终于开始了 promise

对于同步异步回调地狱 的噩梦, 虽然没有亲身体验,但是,想想也是挺蛋疼的。

现在同步异步`问题 正经人,谁不用promise啊。

let name = "my name is ";
console.log("3秒后 打印我的名字")
function promise(boo) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      name += "Dwp"
      if (boo) {
        resolve();
      } else {
        reject();
      }
    }, 3000);
  });
}

function fun(boo) {
  promise(boo)
    .then(() => {
      console.log("then:", name);
    })
    .catch(() => {
      console.error("catch:", name);
    });
}
fun(true);

// 执行结果
// 3秒后 打印我的名字
// then: my name is Dwp

可是到这里, 大家就会发现, 这貌似也没比回调函数优化了多少啊。

async/await 的出现, 解决了这一疑问

// async/await
let name = "my name is ";
console.log("3秒后 打印我的名字");
function promise(boo) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      name += "Dwp";
      if (boo) {
        resolve({ boo, name });
      } else {
        reject({ boo, name });
      }
    }, 3000);
  });
}

// 这样 代码是不是优化了很多 (注意 async/await 只能处理返回是promise的对象)
async function fun() {
  const data = await promise(true);
  console.log(data.name);
  console.log("代码执行 Over");
}
fun(true);

// 执行结果
// my name is Dwp
// 代码执行 Over

总结:

对于同步异步的处理, async/await目前是前端的最好的解决方案。

但是, 有些时候环境不支持, 那么我们再用 promise 原始一些的方法 .then().catch()

要是这个也不支持, 那么就用回调函数的方式。

???: 我明白了, promise 它的出现, 是因为代码中有一个同步异步的情况。

???:懂了, 难怪,别人说promise 我看别人代码 都是 async/await我就觉得好奇怪。

最后

既然你都看完了, 那么你就会发现, promise就是个这东西。
那么不给个点赞 那会不会不太好啊!

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐