当前位置：首页 > news >正文

【新手指南】async/await与Axios的用法

news 2025/9/16 7:07:51

代码

async function getList() {try {const res = await axios.get("https://q6zv39.laf.run/get_list");console.log(res.data); // 通常只需输出实际数据return res.data;       // 返回数据以便后续使用} catch (error) {console.error("请求失败:", error);}
}

前言

如果你是编程新手，看到像async和await这样的关键词，再加上axios这个陌生的函数，可能会感到困惑甚至抓狂！别担心，今天我们从零开始，详细讲解这些概念，弄清楚为什么需要在函数前加async，为什么await要跟在axios前面，以及为什么函数里可以嵌套axios。即使你是纯小白，这篇文章也会让你彻底搞懂这些“啥玩意”，并能在JavaScript开发中轻松上手。

什么是async和await？

async是啥？

async是JavaScript中一个关键字，用来定义一个异步函数。异步函数的意思是：这个函数不会阻塞代码的执行，而是允许在后台处理任务，等到任务完成再返回结果。打个比方，想象你在点外卖：你点了餐（启动任务），然后可以干别的事（不阻塞），等外卖送到（任务完成）再处理。

在代码中，加了async的函数总是返回一个Promise（一种表示未来会完成的操作的对象）。比如：

async function sayHello() {return "Hello";
}
console.log(sayHello()); // 输出：Promise { 'Hello' }

await是啥？

await是另一个关键字，只能用在async函数内部。它的作用是暂停代码执行，等待一个Promise的结果。继续外卖的例子，await就像你在等外卖送到，送到后再继续吃（处理结果）。

比如：

async function sayHello() {let result = await Promise.resolve("Hello");console.log(result); // 输出：Hello
}
sayHello();

await让代码看起来像同步执行，但实际上是异步处理的，背后依赖Promise机制。

为什么需要async和await？

在JavaScript中，很多操作（如网络请求、文件读取）是异步的。传统的回调函数或Promise链式调用容易让代码变得复杂（俗称“回调地狱”）。async/await是ES2017引入的语法糖，简化了异步编程，让代码更直观、更易读。

Axios是什么？

axios是一个非常流行的JavaScript库，用于发送HTTP请求（比如从服务器获取数据）。它返回一个Promise，所以特别适合和async/await搭配使用。在你的代码中：

const res = await axios({url: "https://q6zv39.laf.run/get_list",method: "GET"
});

这里，axios发送了一个GET请求到指定的URL，await等待请求完成，返回结果存储在res中。res通常包含服务器的响应数据，比如状态码和返回的JSON。

为什么axios前面要写await？

axios发送请求是异步操作，需要时间等待服务器响应。如果不加await，代码会立即继续执行，res可能还是未定义的值。加上await，程序会暂停，等待请求完成后再取到res中的数据。这样才能正确处理服务器返回的结果。

举个例子：

async function getList() {const res = axios({url: "https://q6zv39.laf.run/get_list",method: "GET"});console.log(res); // 可能输出未完成的状态
}

如果不加await，res是一个Promise对象，而不是实际数据。改成：

async function getList() {const res = await axios({url: "https://q6zv39.laf.run/get_list",method: "GET"});console.log(res); // 得到真正的响应数据
}

这样，await确保了res是请求完成后的结果。

为什么外层函数要写async？

await只能在async函数内部使用。如果外层函数没有async，JavaScript会报错，因为await需要一个异步上下文。外层函数加async，告诉JavaScript这是一个异步操作的容器，允许内部使用await。

试想一下：如果你不加async，直接写：

function getList() {const res = await axios({url: "https://q6zv39.laf.run/get_list",method: "GET"});console.log(res);
}

会报错：await is only valid in async function。加了async后，代码就合法了。

为什么函数里可以嵌套axios？

“嵌套”这个词可能让你误解了。实际上，代码里的axios不是嵌套在函数里，而是函数内部调用的一个操作。getList函数定义了一个逻辑步骤：使用axios发送请求。函数里可以调用任何合法的JavaScript代码或库函数，包括axios，因为这是JavaScript的灵活性。

嵌套的真正意思可能是多个axios调用，比如：

async function getData() {const res1 = await axios({ url: "url1", method: "GET" });const res2 = await axios({ url: "url2", method: "GET" });console.log(res1, res2);
}