nuxt async请求数据为Promise { <pending> } 状态

最新推荐文章于 2025-06-26 17:30:55 发布

原创最新推荐文章于 2025-06-26 17:30:55 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nuxt async #vue

学习笔记专栏收录该内容

15 篇文章

订阅专栏

在使用Nuxt的asyncData方法访问后台数据时，由于其异步特性，直接在方法内打印数据可能无法立即获取到结果。本文通过一个具体案例，介绍了如何利用setTimeout来延时执行数据打印，从而确保数据加载完成后再进行操作。

今天在写nuxt时使用async asyncData ({ $axios })访问后台请求数据，在控制台打印数据显示

data:  Promise { <pending> }

查看服务端数据是没有问题的，于是看了下别人解决

原来async asyncData异步执行的，会跳过console.log('data: ',data)

于是将其改为

setTimeout(() => {
          console.log('data: ',data)
      },1000)

就行了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ideezlp

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Nuxt 的异步数据处理（八）

qq_35876316的博客

06-28

741

{${${

如何在 nuxt.js 中使用 axios.js 在组件和页面请求数据？

布吉_岛

03-04

1242

创建了前端工程，接下来开始写代码。因为初始化项目，只是最小的一些基本依赖，再开发中，需要一些第三方的库来支持，比如样式/组件库。

参与评论您还未登录，请先登录后发表或查看评论

接口pending状态问题排查

m0_51277853的博客

07-06

2949

接口pending状态问题排查

Nuxt3实战系列之网络请求篇

小王的技术库

04-04

5287

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。有需要的小伙伴，可以点击下方卡片领取，无偿分享。

[web]：async、await与promise

goodloving的博客

09-22

322

文章目录一、Promise详解二、async和await详解三、总结与分析一、Promise详解 Promise是对异步编程的一种解决方案 Promise是一个构造函数，自身有all、reject、resolve这几个方法，原型上有then、catch等方法。Promise的构造函数接收一个函数作为参数，并且在函数中传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调...

promise＜pending＞

wencun184的博客

03-03

1871

返回的是promise<pending>的状态第一种方式then接收 return new Promise((resolve, rejected) => { const images = uploadToOSS(files[0], "store"); console.log(images); \\Promise{<pending>} images .then(urls => { ...

nuxt3 SSR（服务端渲染）接口请求封装

欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！

06-26

927

本文介绍了Vue3项目中基于Nuxt3的API请求封装与SSR实现方案。首先通过useFetch封装了useApiFetch方法，处理GET/POST请求参数差异，并设置统一请求头。接着创建API模块集中管理接口，页面直接调用无需放在生命周期中。重点说明了SSR实现要点：1)请求需在useAsyncData中进行，避免客户端/服务端渲染差异导致Hydration错误；2)通过SSR提示和页面源码可验证SSR是否生效。最后对比了错误的直接赋值和正确的useAsyncData数据加载方式，解决渲染水合不匹配问题

import type { NitroFetchRequest } from 'nitropack' import { useRequestHeaders } from '#app' export const useCustomFetch = <T>(url: NitroFetchRequest, opts?: any) => { const config = useRuntimeConfig() const baseURL = config.public.apiBase || '/' // 自动判断环境：服务端渲染携带原始请求头，客户端请求不特殊处理 const headers = process.server ? useRequestHeaders(['cookie']) : {} return $fetch<T>(url, { baseURL, ...opts, headers: { ...opts?.headers, ...headers }, // 关键配置：根据 Nuxt 生命周期自动选择请求端 onRequest({ options }) { // 服务端渲染时强制指定 fetch 实例 if (process.server) { options.$fetch = globalThis.$fetch } } }) } 这个怎么调用和与这个相对于的配置给我

最新发布

11-27

<div v-if="pending">加载中...</div> <div v-else-if="error">错误: {{ error.message }}</div> <div v-else>用户名: {{ data?.name }}</div> </template> ``` #### 2. POST 请求示例 ```ts // 提交表单数据 ...

nuxtJs4 请求封装

10-15

在 Nuxt.js 4 里，请求封装通常借助其内置的 `useFetch` 或 `useLazyFetch` 组合式函数达成，同时也能使用第三方库，像 Axios 来封装请求。以下是具体的实现方法： ### 使用 `useFetch` 封装请求 `useFetch` 是 ...

nuxtjs4 获取接口数据封装成组件

10-21

<div v-if="pending">Loading...</div>  <div v-else-if="error">{{ error.message }}</div>  <div v-else> <ul>  <li v-...

提示：Promise {<pending>} 的解决方法

听胡说

09-21

8175

Promise 要用 then() 接收或者 async await 来修饰。

接口返回Promise {＜pending＞}解决办法

十一侍卫的博客

03-19

1609

别怀疑，这个函数外面我加了async,只不过一开始没加await,没等他获取到我就输出了，当然是pending状态的Promise对象。把await加上去就行了。

async和await

z142536x的博客

11-26

831

Promise虽然解决了回调地狱的问题，但是存在Promise·的链式调用的问题，容易导致代码冗长、难以阅读和维护，这就是 async/await 出现的原因。async/await 让代码更少，更简洁，易于阅读。

【Vue3】axios获取数据异步变同步，解决“回调地狱”问题，以及解决通过async和await出现Promise ＜pending＞问题（新手终极解决方案）

【敦厚的曹操】的专栏

02-19

3733

axios获取数据异步变同步，解决“回调地狱”问题，以及解决通过async和await出现Promise 问题（新手终极解决方案）

路由跳转时放弃正在pending的请求

qq_42409134的博客

11-30

3268

vue路由跳转时放弃正在pending的请求1axios的cancelTokenvue路由跳转时cancel请求定义请求services.js定义路由router.js定义about页面，放出请求效果图进入about页面跳转至其他页面[https://github.com/myh6666/cancelToken](https://github.com/myh6666/cancelToken) 1 ...

分享：nuxt返回 Promise

awseda的博客

06-02

576

返回 Promise export default { asyncData ({ params }) { return axios.get(`https://my-api/posts/${params.id}`) .then((res) => { return { title: res.data.title } }) } }

Promise和axios的使用

qq_20871839的博客

04-19

1460

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Promise的使用 Promise概念 Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；通过then方法将嵌套做法转换成连续then，上一个then中返回一个promise实例，这个实例将返回resolve或者reject，以此来确定下一个then中执行的方法。 Promise存在三种状态：一、Promise存在三种状态 pending(等待态)， fulfiled(成功态.

浅析Promise用法

huang100qi的专栏

12-18

2017

转自：http://www.jianshu.com/p/78c10239f852 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 Promise对象有以下两个特点。（1）对象的状态不受外界影

Nuxt项目总结

jinmo277的专栏

01-19

1892

SEO 为了使我们的站点更容易被搜索到，或者说在搜索引擎的排名中靠前，那就需要能让爬虫尽可能多的爬到我们的页面，那就需要对站点进行搜索引擎优化，也就是我们所说的SEO 爬虫原理简单过程：爬取url -> 解析html内容 -> 对内容进行检测 -> 将符合收录规则的网页存储下来该网页将会出现在与网页内容相关的查询的搜索结果中。收录方式： 1. 主动发现并抓取 2.每个搜索引擎都有提供链接提交的工具，通过主动推送功能将我们站点的网页收录到爬虫中方案决定基于