vite vue3 async await

async/await是JavaScript中用于处理异步操作的关键字。在Vue.js或其他前端框架中，我们经常使用async/await来发送异步请求并获取数据。async关键字用于将函数标记为异步函数，而await关键字用于等待一个异步操作的完成，并暂停函数的执行直到异步操作完成。通常，await后面跟着一个返回Promise对象的表达式。

一个使用async/await的简单例子是计算三个数的值并将结果输出。代码如下所示：
async function testResult() {
let first = await doubleAfter2seconds(30);
let second = await doubleAfter2seconds(50);
let third = await doubleAfter2seconds(30);
console.log(first, second, third);
}

在这个例子中，doubleAfter2seconds是一个返回Promise对象的函数，它会延迟两秒钟并返回传入参数的两倍。使用await关键字可以等待每个异步操作的完成，并将结果保存在相应的变量中。

相关问题

vue3vite 使用async await

在Vue 3和Vite中，你可以使用async/await来发送异步请求和处理异步操作。async/await是一种基于promise的语法糖，它使得异步代码的编写更加简洁和可读性更高。

在Vue 3中，你可以在组件的方法中使用async关键字来定义一个异步函数。比如，你可以在methods中定义一个async函数，然后在该函数中使用await关键字来等待一个返回promise对象的表达式。

在Vite中，你可以在async函数中使用await关键字来等待异步操作的完成。比如，在使用异步请求库发送请求时，你可以在一个async函数中使用await关键字来等待请求的返回结果。

需要注意的是，async/await必须在async函数中使用，而且async函数始终返回一个promise对象。这意味着你可以在使用async/await的同时，仍然可以使用其他promise相关的方法，比如Promise.all()。

vite vue3封装http请求

### 封装 HTTP 请求的最佳实践

在 Vite 和 Vue3 项目中，通过合理的架构设计可以实现高效的 HTTP 请求封装。这种方式不仅提高了代码的复用性和可维护性，还能够集中处理请求和响应中的通用逻辑。

#### 创建 Axios 实例并配置默认参数

为了简化每次发起请求时所需的配置工作，在项目的 `src` 文件夹下创建一个新的文件夹命名为 `apis` 或者类似的名称用于存放所有的 API 调用函数。接着在这个目录内新建一个名为 `http.js` 的文件用来定义全局使用的 axios 实例：

// src/apis/http.js
import axios from 'axios';

const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API, // 使用环境变量设置基础URL
    timeout: 5000                               // 设置超时时长
});

service.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config;
    },
    error => Promise.reject(error)
);

service.interceptors.response.use(
    response => response.data,
    error => Promise.reject(error)
);

export default service;

此部分实现了对 axios 库的基础配置，并加入了拦截器以便于后续扩展功能，比如身份验证令牌自动附加到头部信息中[^2]。

#### 定义具体的 API 接口方法

继续在同一文件夹 (`apis`) 下面增加具体业务模块对应的 js 文件，例如这里假设有一个获取规则列表的需求，则可以在该路径下新增加一个叫作 `ruleApi.js` 的文件来专门负责与之相关的网络交互操作:

// src/apis/ruleApi.js
import request from './http';

function getRules() {
    return request({
        url: '/rules',
        method: 'GET'
    });
}

export {getRules};

上述代码片段展示了如何基于之前建立好的 http client 来构建特定的服务端资源访问方式。每当需要调用这个接口的时候只需要简单导入对应的方法即可完成数据拉取动作。

#### 在组件内部使用已封装好的 API 方法

最后一步就是在实际页面或者其他地方引入这些预先准备完毕的功能来进行正常的业务流程开发了。以 vue 组件为例展示怎样快速便捷地利用前面提到过的工具集达成目的:

<template>
<div>{{ rules }}</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import * as ruleService from "@/apis/ruleApi";

let rules = ref([]);

(async () => {
try {
    let res = await ruleService.getRules();
    rules.value = res.list || [];
} catch(err){
    console.error("Failed to fetch rules", err);
}
})();
</script>

这段模板化脚本说明了当组件被加载进来之后会立即执行一次异步任务去远程服务器抓取最新的规则集合并将结果显示给用户查看。