Question

我对JS和Promise世界还很陌生，而且我读过许多关于Promise，回调，异步/等待的文章。

我具有primaryStage.setWidth(var1)函数，该函数请求uri中的所有帖子。

primaryStage.setHeight(var2)

我正在尝试使用getAllPost()的结果来映射内容，并且我想导出// get-content.js export async function getAllPost(){ let uri = "http://127.0.0.1/posts"; let request = axios.get(uri); return request; } export default getAllPost;。

getAllPost()

我知道posts是// posts.js import * as Navi from 'navi' import slugify from 'slugify' import { getAllPost } from './get-content' let getPost = getAllPost(); let articles; getPost.then((response) => { articles = response; }) console.log(articles); // undefined. let postDetails = articles.map( content => { let title = content.title; let slug = slugify(content.title); let date = new Date(content.date); let contentKey = content.contentKey; return {contentKey, title, slug, date} }) let posts = postDetails.map( ({contentKey, title, slug, date}, i) => ({ getPage: Navi.map(async () => { return Navi.route({ title, getData: (req, context) => ({ date, slug, }), getView: async () => { let MDXComponent = await getContent(contentKey); return { MDXComponent } } }) }), slug, }) ) export default posts;，因为js不会等待articles完成。

我试图将整个undefined和getPost.then()放在let postDetails = articles.map(...)块中，但是在那种情况下，我无法导出let posts = postDetails.map(...)。

getPost.then((response) => { ... })

编辑：

感谢您的建议，但我应该更加清楚。

这是我将如何使用帖子：

posts

我想我必须重写getPost.then((response) => { let articles = response; let postDetails = articles.map( content => { ... }) let posts = postDetails.map( ... ) export default posts; // compile failed. })才能允许回调吗？
https://github.com/lodash/lodash/blob/master/chunk.js

Answer 1

您的getAllPosts函数是默认的导出，因此在将其导入下一个脚本时，无需将其用大括号括起来。

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

调用函数时，您可以立即开始执行然后的函数，而不必将响应传递给另一个变量...

getAllPost().then(articles => {
  // articles.map etc...
  // The rest of your code must live inside this function
  // because anything outside of here won't wait for the
  // articles promise. 
  // This is async world, outside isn't. 
})

如果您不喜欢留在promise函数中，可以使用的另一种方法是async await，它更加简洁明了。

let articles
try {
  articles = await getAllPost()
} catch (err) {
  console.log(err)
}
// Do stuff with articles...

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

Answer 2

我认为您应该这样做：

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

async function getPosts(){
    const articles = await fetchArticles();
    let postDetails = articles.map(...);
    let posts = postDetails.map(...);

    return posts
}

export default getPosts; // you can't export posts directly, you should export a function and call it to get posts

Answer 3

异步等待是关于promise api的糖语法。编写异步等待不会使您代码同步。

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
})()

类似地，您必须解决出口职位呼叫。

Answer 4

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

// 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毫秒）中，该功能已经完成并且返回未定义。借助await，您可以让Promise等待您的请求，直到得到答复为止。

第二个问题：由于getAllPost()本身会返回结果，因此您可以这样编写代码：

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

从承诺中导出结果然后阻止

4 个答案: