如何在 JavaScript 中使异步查询同步？

Question

我遇到一个问题：我的管理员页面在渲染时没有检查当前用户是否有权查看该页面。一旦它检查权限（需要一秒钟左右）并意识到用户没有权限，就会出现错误页面。理想情况下，我不希望它在检查权限之前完全呈现。我认为问题在于获取当前用户数据的查询是异步的，所以我相信我需要使用 async 和 wait 来使其同步。

这是一个 AdministratorPage.jsx 文件，在检查权限时不应呈现

import currentUser from '../lib/currentUser';
import React, { Component } from 'react';
import { ApolloConsumer } from 'react-apollo';

class AdministratorPage extends Component {

    render() {
        return (
            <ApolloConsumer>
                {(client) => {
                currentUser(client).then((data) => {
                    if(!data.currentUser..permissions)) {
                        this.props.history.push('/error');
                    }
                    return (
                       ... content rendered ...

代码的执行在完成 currentUser(client).then((data) => 调用之前调用第二个返回函数，但我希望首先完成此调用。

这是 currentUser.js 文件，它执行查询来检查当前用户的数据

import gql from 'graphql-tag';

export default apolloClient => apolloClient
    .query({
        query: gql`
            query CURRENT_USER {
                name
                age
                gender
                permissions
            }
        `,
    })
    .then(({ data }) => ({ currentUser: data }))
    .catch(() =>
        ({ currentUser: {} }));

我想我需要使用 async 和 wait 将查询从 currentUser.js 转换为同步函数。有谁知道如何做到这一点？

Answer 1

您可以利用异步/等待

import gql from 'graphql-tag';

const request = apolloClient => apolloClient
    .query({
        query: gql`
            query CURRENT_USER {
                name
                age
                gender
                permissions
            }
        `,
    })

async getUser = () => {
   const response = await request(apolloclient);
   console.log(await response);
}