南宁软件优化网站建设/济南网络推广公司电话

aysnc和await的基础语法

下面是一个加载图片的函数返回promise对象
await 接收的是一个promise对象

function img_onload(url) {return new Promise((resolve, reject) => {const img = document.createElement('img');img.onload =  () =>{resolve(img)}img.onerror = () =>{reject(new Error(`图片加载失败${src}`))}img.src = url //触发图片的加载 加载成功就会调用上面的onload函数反之就会调用下面的})}const url ='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594447181777&di=dc5e4605ecd49cec1c1b1ebd72c2cdb4&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Flarge%2F64087361jw1esx3p6y7tmj21120op4ao.jpg'// img_onload(url).then(img=>{
//     console.log(img.height);
// })
!(async function(){const img = await img_onload(url)console.log(img);
})()

aysnc/await和promise的关系

aysnc/await是同步语发，彻底消灭了回调函数
aysnc/await和promise有关联

async函数返回一个promise对象

await相当于.then()

如果不是await后面 不是promise 对象 是一个值，也会自动封装成promise

await后面还可以跟上一个promise函数

try/catch相当于catch

如下

异步的本质

下面执行过程顺序能看懂，基本上就理解async/await异步了，
需要注意的是async函数里面的内容是要先执行的还是同步的，但是await 下面的代码 都是相当于异步的回调函数中执行的了