Javascript 从promise导出结果，然后阻塞

我对js和promise world相当陌生，我读过很多关于promise、callback、async/await的文章

我有一个函数

getAllPost（）

，它从一个uri请求所有帖子

//get-content.js
导出异步函数getAllPost（）{
让uri=”http://127.0.0.1/posts";
let request=axios.get（uri）；
返回请求；
}
导出默认getAllPost；

我试图使用

getAllPost（）

的结果来映射内容，我想导出

posts

//posts.js
从“Navi”导入*作为Navi
从“slugify”导入slugify
从“./get content”导入{getAllPost}
让getPost=getAllPost（）；
让文章；
getPost.then（（响应）=>{
文章=回应；
})
console.log（文章）；//未定义。
让postDetails=articles.map（内容=>{
让title=content.title；
让slug=slugify（content.title）；
let date=新日期（content.date）；
让contentKey=content.contentKey；
返回{contentKey，title，slug，date}
})
让posts=postDetails.map(
（{contentKey，title，slug，date}，i）=>
({
getPage:Navi.map（异步（）=>{
返回导航路线({
标题
getData：（请求，上下文）=>({
日期，
鼻涕虫
}),
getView:async（）=>{
让MDXComponent=等待getContent（contentKey）；
返回{MDXComponent}
}
})
}), 
鼻涕虫
})
)
导出默认职位；

我知道

文章

是

未定义的

，因为js不会等待

getPost.then（）

finish

我试图将整个

let postDetails=articles.map（…）

和

let posts=postDetails.map（…）

放在

getPost中。然后（（response）=>{…}）

块，但在这种情况下，我无法导出

posts

getPost.then（（响应）=>{
让文章=回应；
让postDetails=articles.map（内容=>{
...
})
让posts=postDetails.map(
...
)
导出默认帖子；//编译失败。
})

编辑：

谢谢你的建议，但我应该说得更清楚

以下是我将如何使用这些帖子：

从'lodash'导入{chunk，fromPairs}
从“./posts”导入帖子
//此时，posts必须是一个数组。
设chunks=chunk（posts，n）

我想我必须重新编写

chunk（）

才能允许回调？

---

您的

getAllPosts

函数是一个默认导出，因此在将其导入下一个脚本时不需要将其用大括号括起来

您的

文章

未定义，因为您试图在promise函数之外使用它

当您调用函数时，您可以立即开始执行then函数，而不是将响应传递给另一个变量

getAllPost（）。然后（文章=>{
//文章。地图等。。。
//代码的其余部分必须位于该函数内
//因为这里以外的任何东西都不会等待
//文章承诺。
//这是异步世界，外部不是。
})

如果您不喜欢呆在promise函数中，可以使用另一种方法async await，它更简洁、更容易理解

let文章
试一试{
articles=等待getAllPost（）
}捕捉（错误）{
console.log（错误）
}
//用文章做东西。。。

---

注意上面的代码必须在异步函数中。

我认为您应该这样做：

export async function fetchArticles() {
    let uri     = "http://127.0.0.1/posts";
    return await axios.get(uri);
}

---

Async await是promise api的糖类语法。编写AsyncWait不会使代码同步

let getPost = getAllPost();
let articles;
getPost.then((response) => {
  articles = response;
})

console.log(articles); // undefined.

在这里，当您调用getPost时，您将在回调中获得心律失常。但是，console.log（articles）；//未定义。另一行将在调用之前执行。如果你想懒洋洋地初始化某些东西，你必须等待结果，而不是调用其他东西。下面我举了一个例子

(async function() {
 const articles = await getAllPost()

console.log(articles); // not undefined.

let postDetails = articles.
/// rest of the code
})()

---

同样，您必须解决导出POST呼叫。

您的问题是，您忘记在axios请求之前添加关键字

wait

：

// get-content.js
export default async function(){
   let uri     = "http://127.0.0.1/posts";
   let request = await axios.get(uri);
   return request.data;
}

它是未定义的，因为您使用axios.get（uri）发送了一个请求，并且该请求实际上返回了一个结果，但是获取结果需要一些时间，比如说大约100毫秒。在这段时间内，例如100毫秒，函数已经完成并返回未定义的结果。使用

wait

您可以让承诺等待您的请求，直到您得到响应

第二个问题： 因为

getAllPost（）

本身返回结果，所以您可以这样编写代码：

import getAllPost from "./get-content";
let articles =  getAllPost();

---

嗨，曹萱，我可能错了，但我认为，你不能从

然后
回调中导出（如果函数从未调用怎么办？）。但是，您可以导出方法
getPost
，然后在其他地方调用它。@Ryuno Ki，是的，您是对的。它不能从then block导出。我认为
articles
是有希望的，因为
getAllPost（）
是
async
函数，所以我仍然需要使用
。然后
block从
请求中获取数据。数据
。如果使用wait，则不需要回调then函数。请阅读promise/asycn/await以澄清问题。完全同意Async await是sugar语法。我尝试了iLife，但我仍然需要
。然后
块从
文章
获取数据；是的，我仍然需要找到一种方法来导出
帖子
，但我无法将其导出到then（）中。
import getAllPost from "./get-content";
let articles =  getAllPost();