北京网站建设成都,基于jsp网站开发开题报告,wordpress主题36氪,网站做一样的算侵权么上一节说#xff0c;JavaScript异步操作需要通过Promise实现#xff0c;一个Promise对象在操作网络时是异步的#xff0c;等到返回后再调用回调函数#xff0c;执行正确就调用then()#xff0c;执行错误就调用catch()。
虽然异步实现了#xff0c;不会让用户感觉到页面“…上一节说JavaScript异步操作需要通过Promise实现一个Promise对象在操作网络时是异步的等到返回后再调用回调函数执行正确就调用then()执行错误就调用catch()。
虽然异步实现了不会让用户感觉到页面“卡住”了但是一堆then()、catch()写起来麻烦看起来也乱。
有没有更简单的写法 一、async函数
可以用关键字async配合await调用Promise实现异步操作但代码却和同步写法类似
async function get(url) {let resp await fetch(url);return resp.json();
} Fetch API简介 使用async function可以定义一个异步函数异步函数和Promise可以看作是等价的。
在async function内部用await调用另一个异步函数写起来和同步代码没啥区别但执行起来是异步的。
也就是说
let resp await fetch(url);
自动实现了异步调用它和下面的Promise代码等价
let promise fetch(url);
promise.then((resp) {// 拿到resp
})
如果我们要实现catch()怎么办用Promise的写法如下
let promise fetch(url);
promise.then((resp) {// 拿到resp
}).catch(e {// 出错了
});
用await调用时直接用传统的try{ ... } catch
async function get(url) {try {let resp await fetch(url);return resp.json();} catch (e) {// 出错了}
}
用async定义异步函数用await调用异步函数写起来和同步代码差不多但可读性大大提高。
需要特别注意的是await调用必须在async function中不能在传统的同步代码中调用。
那么问题来了一个同步function怎么调用async function呢
首先普通function直接用await调用异步函数将报错
async function get(url) {let resp await fetch(url);return resp.json();
}function doGet() {let data await get(/api/categories);console.log(data);
}doGet(); 如果把await去掉调用实际上发生了但我们拿不到结果因为我们拿到的并不是异步结果而是一个Promise对象
async function get(url) {let resp await fetch(url);return resp.json();
}function doGet() {let promise get(/api/categories);console.log(promise);
}doGet();// [object Promise] 异步函数总是返回一个Promise对象。如果函数体中没有显式地返回任何值或者返回了一个非Promise值那么这个值会被包装成一个已解决的Promise返回。 async function resolveWithValue() { return Hello, World!; // 返回一个已解决的Promise其值为Hello, World!
} async function resolveWithUndefined() { // 没有返回值但会隐式地返回一个已解决的Promise其值为undefined
} 因此在普通function中调用async function不能使用await但可以直接调用async function拿到Promise对象后面加上then()和catch()就可以拿到结果或错误了
async function get(url) {let resp await fetch(url);return resp.json();
}function doGet() {let promise get(/api/categories);promise.then(data {// 拿到datadocument.getElementById(test-response-text).value JSON.stringify(data);});
}doGet();
因此定义异步任务时使用async function比Promise简单调用异步任务时使用await比Promise简单捕获错误时按传统的try...catch写法也比Promise简单。只要浏览器支持完全可以用async简洁地实现异步操作。 值得注意的是虽然await使异步代码看起来像同步代码一样简单但它并没有改变JavaScript的单线程和非阻塞特性。
当await一个Promise时JavaScript引擎会暂停当前async函数的执行直到Promise解决或拒绝然后继续执行后续的代码。在这个过程中JavaScript引擎可以处理其他任务比如事件监听、其他Promise的解决等因此它仍然是非阻塞的。
