JavaScript async await 怎么用
生活中，我们经常会遇到“需要等一等”的场景：比如点外卖，不能刚下单就直接吃，得等商家做好、骑手送到；再比如打开视频，不能刚点播放就立刻加载完所有内容，得等缓冲完成才能流畅看。写代码也一样，有些操作不能立刻出结果，得等一等，这时候JavaScript的async await就能派上用场啦。
先搞懂：为什么需要“等一等”？
JavaScript原本的代码是从上到下一行一行跑的，比如你写了“打印1”“打印2”，就会先出1再出2。但如果碰到“发请求查天气”这种慢操作——比如你让浏览器去服务器查今天的温度，总不能一直等着不做别的吧？要是还写一行“查天气”再“打印温度”，浏览器就会卡住，连点个返回都动不了。
以前处理这种情况，用的是“回调函数”，就像你让朋友帮你取外卖，你得跟他说“取到了记得告诉我”，但要是同时取好几个外卖，就得写好几个嵌套的回调，看着就像“俄罗斯套娃”，乱得很。这时候async await就来了，它能把“等一等”的逻辑写得像普通代码，一眼就看懂。
第一步：先认识两个“小标记”——async和await
想用上async await，得先记住两个规则：
第一，“async要写在函数前面”。就像你要让一个朋友帮你做“等外卖”的事，得先跟他说“你这个任务是需要等的哦”，这个“说一声”就是在函数开头加async。比如写一个帮你查天气的函数，开头就加async：
`javascript
// 加了async，就说明这个函数里有要等的操作
async function getWeather() {
// 后面可以用await了
}
`
第二，“await只能放在async函数里”。就像你不能让一个不想等的朋友帮你取外卖，得让他先答应“我会等”，你才能跟他说“等外卖到了告诉我”，这个“告诉我”的动作就是await。比如要等查天气的结果，就这么写：
`javascript
async function getWeather() {
// 等服务器返回天气，这期间浏览器不会卡
const temperature = await fetch('/api/weather');
console.log('今天温度是：', temperature);
}
`
这里的fetch是浏览器自带的发请求的方法，本来它返回一个“待完成的结果”，加了await之后，就会等着它真的拿到结果，再把值赋给temperature，就像你等外卖到了再拿过来一样。
用生活化例子：模拟“等外卖”的代码
举个更贴近生活的例子，比如你要写一个“点外卖”的代码：先下单（等商家确认），再等骑手取餐，最后拿到外卖。用async await写出来是这样的：
`javascript
// 模拟一个“需要等的操作”，比如商家确认订单
function confirmOrder() {
return new Promise(resolve => {
// 假装等2秒商家确认
setTimeout(() => resolve('订单已确认'), 2000);
});
}
// 模拟骑手取餐
function getRider() {
return new Promise(resolve => {
// 假装等1.5秒骑手接单
setTimeout(() => resolve('骑手已取餐'), 1500);
});
}
// 点外卖的总函数，加async标记
async function orderFood() {
console.log('开始点外卖');
// 等订单确认
const step1 = await confirmOrder();
console.log(step1);
// 等骑手接单
const step2 = await getRider();
console.log(step2);
console.log('外卖拿到啦，可以吃了');
}
// 运行这个函数
orderFood();
`
你猜运行后会怎么输出？会先打“开始点外卖”，然后等2秒出“订单已确认”，再等1.5秒出“骑手已取餐”，最后出“外卖拿到啦”——就像真实的取餐流程，一步一步来，不会乱，代码读起来就像说话一样顺。
遇到错误怎么办？就像外卖没送到
要是点外卖时商家出餐慢，或者骑手没接单，就会出错。对应到代码里，await等待的操作可能失败，这时候要用try catch来处理，就像你外卖没到就找客服：
`javascript
async function orderFood() {
try {
const step1 = await confirmOrder();
console.log(step1);
const step2 = await getRider();
console.log(step2);
console.log('外卖拿到啦');
} catch (error) {
// 任何一步出错，都会跑到这里
console.log('出问题啦：', error);
}
}
`
这样就不会让整个代码直接崩溃，而是能友好地告诉用户“外卖出问题了”。
总结一下，async是给函数加“允许等待”的标记，await是在函数里“等需要的结果”，把原本复杂的异步逻辑，变成了像同步代码一样好读好懂，再也不用写一堆嵌套的回调啦。