异步（上）
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 返回。
欢迎大家点赞，收藏，关注！！！
本文链接：https://my.lmcjl.com/post/3076.html
4 评论