nuxt或者vue,axios中如何发送多个请求

### 集成和使用 Axios 进行 HTTP 请求 在 Nuxt.js 中，`@nuxtjs/axios` 是一个非常流行的模块，用于简化 HTTP 请求操作。以下是关于如何配置和使用 `@nuxtjs/axios` 的详细介绍。 #### 添加 Axios 到项目中 为了使 Axios 能够正常工作，首先需要将其作为依赖项安装并添加到项目的配置文件中： ```bash npm install @nuxtjs/axios --save ``` 随后，在 `nuxt.config.js` 文件中引入此模块[^2]： ```javascript // nuxt.config.js export default { modules: [ '@nuxtjs/axios', ], }; ``` 这样就完成了基本的设置过程。 #### 使用 Axios 发起请求 一旦完成上述步骤，就可以通过 Vue 组件中的 `$axios` 实例来发起 HTTP 请求。下面是一个简单的例子展示如何获取数据： ```vue <template> <div> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { items: [], }; }, async fetch() { const response = await this.$axios.get('https://api.example.com/items'); this.items = response.data; }, }; </script> ``` 在此示例中，组件会在加载时自动调用 `fetch()` 方法，并从指定 URL 获取资源列表[^1]。 #### 自定义 Axios 配置 如果希望调整默认行为或者设定全局参数（比如基础路径），可以在同一配置文件里扩展 Axios 设置： ```javascript // nuxt.config.js export default { axios: { baseURL: 'https://api.example.com/', timeout: 1000, headers: { common: { Authorization: 'Bearer my-token' } } }, }; ``` 以上代码设置了 API 基础地址以及超时时间，并且为所有的 GET 和 POST 请求附加了一个认证头信息[^3]。 ---