javascript Promise使用与小结

最新推荐文章于 2024-09-06 10:21:38 发布

厚渡

最新推荐文章于 2024-09-06 10:21:38 发布

阅读量5.6k

点赞数

分类专栏： javaScript nodejs 文章标签： javascript es6 node.js

本文链接：https://blog.csdn.net/dwp_wz/article/details/113677935

版权

javaScript 同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

nodejs

17 篇文章 0 订阅

订阅专栏

快过年了，大家新年好。

我今天刚好有时间，在群里面老有人问一些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