nuxtjs中使用axios

本文详细介绍了在NuxtJS项目中集成Axios库的方法,包括如何在创建项目时选择集成,以及在未选择集成时如何手动安装和使用Axios进行异步数据请求。同时,对比了集成前后使用Axios的不同方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近使用nuxtjs服务端渲染框架,在异步请求时遇到两个问题,一是怎么使用axios, 二是怎么在asyncData方法中使用axios

当使用脚手架create nuxt-app创建项目时,会提示是否集成axios, 如果不选择,后面则使用方式一请求异步数据,如果选择,后面则使用方式二请求异步数据

如上图,按照提示到选择axios的步骤,键盘"up", "down"移动箭头,space空格键选择或者取消, 然后继续enter进入下一步即可。

方法一:普通的方式 

1 .npm或者yarn安装依赖包

1 $ npm install axios -S

2 . 引入到组件中

 

 1 import axios from 'axios';
 2 
 3 export default {
 4   /* 其他代码 */
 5    // 使用Promise 
 6    asyncData ({params}) {
 7       return axios.get(`https://maoyan.com/ajax/cities`)
 8          .then(res => {
 9              console.log(res)
10           })    
11   }
12       
13   // 使用 async ... await  , 与Promise选择一种即可
14   async asyncData({params}) {
15     let { res } = await axios.get(`https://maoyan.com/ajax/cities`) 
17     console.log(res)    
18   }
19     
20   /*其他代码*/
21 }

 

方法二:集成的方式

  首先需要在配置文件nuxt.config.js中配置axios项

 1 modules: [
 2     '@nuxtjs/axios',
 3     '@nuxtjs/bulma'
 4 ],
 5   /* 需要使用 aixos必须配置以下两项axios和proxy*/
 6   axios: {
 7     prefix: '/api/',
 8     proxy: true
 9 },
10 
11 proxy: {
12     '/api/': {
13       target: 'https://maoyan.com/',
14       pathRewrite: {
15         '^/api/': ''
16       }
17     }
18  },

 

在组件中使用axios, 无需在import引入, 直接使用this.$axios即可

1 // 这里引入context是上下文参数,代替了this,
2 // 因为在asyncData方法是在组件初始化时调用,所以没法通过this来引用组件实例对象。
3 asyncData(context) {
4     return context.$axios.get('ajax/cities')
5       .then(res => {
6         console.log(res)
7       })
8   }

 

转载于:https://www.cnblogs.com/hughes5135/p/10398920.html

在 Nuxt 3 中集成 Axios 可以通过官方提供的模块 `@nuxtjs/axios` 或直接使用原生配置来完成。以下是详细的步骤以及一些注意事项: ### 步骤一:安装依赖 首先需要确保项目中有 Axios 的支持。虽然 Nuxt 社区推荐的 `@nuxtjs/axios` 模块尚未完全适配 Nuxt 3,但仍可以手动设置 Axios。 运行以下命令添加 Axios 到您的项目: ```bash npm install axios ``` ### 步骤二:创建插件文件 接下来,在项目的 `plugins` 文件夹下新建一个名为 `axios.js` 的插件文件,并注册它到应用中。 #### 插件内容示例 (`plugins/axios.js`): ```javascript import { defineNuxtPlugin } from '#app' import axios from 'axios' export default defineNuxtPlugin((nuxtApp) => { const apiClient = axios.create({ baseURL: 'https://api.example.com', // 设置基础URL withCredentials: false, headers: { common: { 'Authorization': 'Bearer your_token_here', } }, }) nuxtApp.provide('axios', apiClient) }) ``` 上述代码将自定义化的 Axios 客户端实例注入了 Vue 应用上下文中,你可以通过 `this.$axios` (组件内部) 来访问它。 ### 步骤三:启用插件 在 `nuxt.config.ts` 配置文件内声明此插件生效。 ```typescript export default defineNuxtConfig({ plugins: [ '~/plugins/axios.js' ] }) ``` ### 使用方法 现在可以在页面、组件甚至组合式 API 中轻松获取并利用 Axios 实现网络请求功能。 例如在一个 `.vue` 组件里调用 GET 请求: ```html <script setup> const runtimeConfig = useRuntimeConfig() const { data, error } = await $fetch('/endpoint', { method:'GET', }) if(error.value){ console.error("发生错误",error.value); } </script> <template> <div>{{data}}</div> </template> ``` 注意这里我们还借助 `$fetch`, 这是由 Nuxt 内建封装过的轻量级 fetch 工具。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值