Question

我在呈现“管理员”页面时没有检查当前用户是否有权查看该页面时遇到问题。一旦它检查了权限（花了大约一秒钟的时间）并意识到用户没有权限，就会出现错误页面。理想情况下，在检查权限之前，我根本不希望它呈现。我认为问题在于获取当前用户数据的查询是异步的，因此我相信我需要使用async并等待使其同步。

这是一个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）之前先调用第二个返回函数。然后（（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和await将查询从currentUser.js转换为同步函数。有谁知道该怎么做？

Answer 1

您可以利用async/await

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

Answer 2

在JavaScript同步请求中，您只能使用以XMLHttpRequest标志等于async打开的false

let async = false 

XMLHttpRequest.open(method, url, async) // it's synchronous request.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open

Apollo GraphQl中的PS，您无法做到这一点。

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

2 个答案: