快过年了， 大家新年好。

我今天刚好有时间， 在群里面老有人问 一些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就是个这东西。
那么不给个点赞 那会不会不太好啊！