nuxtjs中使用axios

最新推荐文章于 2024-05-14 09:59:43 发布

weixin_30879833

最新推荐文章于 2024-05-14 09:59:43 发布

阅读量513

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hughes5135/p/10398920.html

本文详细介绍了在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   }