vue-Nuxt.js服务端渲染发起请求

简介: vue-Nuxt.js服务端渲染发起请求

1. 前言

1.之前写了篇react-next.js服务端渲染

  1. 这次写个 vue端的  Nuxt.js服务端如何发起请求
  2. Nuxt.js

2. 使用内置的$axios模块

  1. Nuxt.js内置了$axios模块,它是基于axios库的封装,可以在页面组件或插件中直接使用
  2. 代码

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>
<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('https://api.example.com/data');
    const data = response.data;
    return {
      data
    };
  }
};
</script>

1.asyncData方法在服务器端发起HTTP请求,获取数据,并将数据作为组件的属性返回

  1. 这样在页面组件中就可以使用data来展示数据了

3. 扩展

1.使用第三方库:除了内置的$axios模块,你还可以使用其他第三方库,例如axios、isomorphic-fetch等。

  1. 使用这些方法与普通的Vue应用中相同。你可以在页面组件或插件中导入并使用这些库来发起请求。


参考资料

nuxtjs


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉


相关文章
|
4天前
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
sd.js 2.0封装:更加简化请求传参内容(逐步废弃、逐渐日落2024.01.02)
|
4天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
17 0
springboot从控制器请求至页面时js失效的解决方法
|
4天前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
48 0
|
4天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
17 0
|
4天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
|
1天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
6 0
|
3天前
|
存储 缓存 负载均衡
Node.js中间层如何处理并发请求以提供高性能和可扩展性
Node.js中间层如何处理并发请求以提供高性能和可扩展性
|
3天前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
20 3
|
3天前
|
JSON JavaScript API
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
11 1
|
3天前
|
JSON JavaScript 中间件
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
9 2