JS 异步（上）

异步（上）

4.1 面试题

1.同步和异步的区别是什么
2.手写 promise 加载一张图片
3.前端使用异步的场景有哪些
 

4.2 知识点

1.单线程和异步
2.应用场景
3.callback hell 和 Promise
 

4.3 单线程和异步

1.单线程

JS 是单线程语言，同一时间只能做一件事（ 浏览器和nodejs已支持JS启动进程，如 Web Worker ）

因为 JS 可以修改 DOM 操作，因此 JS 和 DOM渲染需要共用一个线程，当 JS 执行时，DOM 渲染需要暂停，DOM 渲染执行时，JS 执行需要暂停

2.为什么需要异步

遇到等待（网络请求，定时任务等）不能卡住，需要异步（通过 回调 callback 函数形式 ）

3.异步与同步的区别
1.基于 JS 是单线程语言
2.异步不回阻塞代码执行
3.同步会阻塞代码执行

4.异步应用场景

网络请求，如 ajax 图片加载
定时任务，如 setTimeout
react setState 为了效率，可能多次 setState 一起赋值
 

4.4 promise 基本使用

promise 解决了 callback hell 的问题

new Promise(function (resolve, reject) {
    // 要做的事情...
	// 成功：resolve，用 then 捕捉结果
	// 失败：reject，用 catch 捕捉结果
});

promise实现了从嵌套到顺序

手写 promise 加载一张图片，详述过程

const imgUrl = "...";	// 网上随便找张图片的链接

function imgLoad(url) {
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.onload = () => {
      // 图片加载成功之后，resolve表示成功，并且把结果返回出去，可以用then接收
      resolve(img);
    };
    img.onerror = () => {
      const err = new Error('图片加载失败！');
      // 图片加载失败之后，reject表示失败，并且把结果返回出去，可以用catch接收
      reject(err)
    }
    img.src = url;
  });
}

imgLoad(imgUrl).then((res1) => {
  console.log(res1);
	// 如果后面还需要用then来接受进行下一步操作，则需要把结果return出去，下一个then的参数就是这里返回的结果
  return res;   
}).then((res2) => {
  console.log(res2.width, res2.height);
}).catch(err => {
  console.log(err);
});

 

4.5 promise补充

Promise里面，resolve和return的区别在哪？为什么return也能传参到下一个.then？

resolve 是表示 promise 成功了，只在 new Promise(…) 中调用。成功了，才可调用后面 第一个 then 的回调函数。第一个 then 接受的也是传入resolve 中的参数。
而 return 是 .then 中函数的返回值，可以给下一次 .then 传递。
即，刚开始成功的时，值是通过 resolve(…) 表示的，后面 .then 时就得通过 return 返回。