【九月打卡】第18天 BAT大牛带你横扫初级前端JavaScript面试（第二版）

学习课程名称：BAT大牛带你横扫初级前端JavaScript面试（第二版）
章节名称：异步（新版）
讲师姓名：双越

---

课程内容：

1. 同步和异步的区别
2. 异步的应用场景
3. promise
4. JS基本知识-总结

---

JS三座大山：

1. 原型和原型链
2. 作用域和闭包
3. 单线程和异步

单线程和异步：
JS 是单线程语言，只能同时做一件事儿
浏览器和nodejs 已支持 JS 启动进程，如 Web Worker:但是并不能改变JS单线程的本质
JS和DOM渲染共用同一个线程，因为JS可修改DOM结构

异步为何产生：为了解决单线程带来的问题

在实际工作中，遇到等待（网络请求、定时任务）不能卡住，需要异步解决方案，解决等待问题，异步是基于回调（callback）函数形式调用的

异步和同步的区别：
异步：不会阻塞代码执行
同步：会阻塞代码执行

异步的应用场景：

1. 网络请求
2. 定时任务

针对异步的解决方案，ES6提出了Promise，其解决了回调地狱（callback hell）的问题，从传统的嵌套式往非嵌套式（管道式串联）转变。

手写Promise加载图片

function loadImg(src) {
  const p = new Promise((resolve, reject) => {
    const img = document.createElement("img");
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      const err = new Error(`图片加载失败 ${src}`);
    };
    img.src = src;
  });
  return p;
}

const url = "图片的地址";

loadImg(url)
  .then((img) => {
    console.log(img.width);
    return img;
  })
  .then((img) => {
    console.log(img.height);
  })
  .catch((err) => console.log(err));

---