promise async await使用在axios
时间: 2025-06-28 07:19:53 浏览: 9
### 使用 Axios 进行 HTTP 请求时正确运用 Promise、async 和 await
#### 创建异步函数
在一个函数前加上 `async` 关键字表示此函数总是返回一个 Promise。这使得可以在函数内部使用 `await` 来等待 Promise 完成。
```javascript
async function fetchData(url) {
try {
const response = await axios.get(url);
console.log(response.data); // 处理响应数据
} catch (error) {
console.error('Error fetching data:', error); // 错误处理
}
}
```
这段代码定义了一个名为 `fetchData` 的异步函数,它接受 URL 参数并尝试通过 GET 方法发起请求[^4]。
#### 发起带有参数的 POST 请求
当需要发送带参数的数据到服务器时,可以构建一个包含配置的对象传递给 `axios.post()` 函数:
```javascript
const postData = { title: 'foo', body: 'bar', userId: 1 };
async function submitPostRequest(url, postData) {
try {
const response = await axios.post(url, postData);
console.log('Response from server:', response.data);
} catch (error) {
console.error('Failed to post data:', error);
}
}
```
这里展示了如何利用 `await` 等待来自服务器对于 POST 请求的回复,并且能够捕获任何可能发生的错误[^5]。
#### 并发执行多个请求
有时希望并发地发出几个独立但相互关联的 API 调用。这时可以用 `Promise.all([])` 结合 `await` 来实现这一点:
```javascript
async function fetchMultipleResources(urls) {
try {
const requests = urls.map(url => axios.get(url));
const responses = await Promise.all(requests);
return responses.map(res => res.data);
} catch (error) {
throw new Error(`One or more requests failed ${error.message}`);
}
}
// Example usage with an array of URLs.
const resourceUrls = ['https://api.example.com/resource1', 'https://api.example.com/resource2'];
fetchMultipleResources(resourceUrls).then(dataArray => console.log(dataArray)).catch(console.error);
```
上述例子说明了怎样一次性启动所有的请求并将它们放入数组中交给 `Promise.all()` 去管理;一旦所有请求都完成,就会获得一组结果[^1]。
#### 遍历列表中的每一项并对其应用异步操作
如果想要遍历一个项目列表并对每一个项目执行一次网络请求,需要注意的是像 `.forEach()` 或者简单的循环语句并不支持直接配合 `await` 工作良好。因此推荐改用其他迭代方式如 `for...of` 循环来确保每次调用都能按顺序被执行而不会跳过任何一个未决状态的任务。
```javascript
async function processItems(items) {
for (let item of items) {
try {
let result = await axios.get(item.url);
console.log(`${item.name}:`, result.data);
} catch (err) {
console.warn(`Failed processing ${item.name}`, err);
}
}
}
```
在这个片段里,`processItems` 函数接收一个物品集合作为输入,依次访问每个项目的链接地址,并打印出相应的输出或警告信息[^2]。
阅读全文
相关推荐


















