javascript - 即使服务器正在发送数据，也无法显示来自 REST 调用的数据

Question

我正在尝试使用 header 中的 token 执行休息调用以显示信息。有一个必需的 header token ，因此我的代码与我的restClient.js、app.js 和users.js 类似。

//restClient.js
import { jsonServerRestClient, fetchUtils } from 'admin-on-rest';

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }
    options.headers.set('token', 'admin');
    return fetchUtils.fetchJson(url, options);
}

const restClient = jsonServerRestClient('http://localhost:8080/api/v2', httpClient);

export default (type, resource, params) => new Promise(resolve => setTimeout(() => resolve(restClient(type, resource, params)), 500));

//App.js
import React, {Component} from 'react';
import { Admin, Resource } from 'admin-on-rest';

import { UserList } from './users';
import restClient from './restClient';

class App extends Component {
  render() {
    return(
          <Admin restClient={restClient}>
              <Resource name="admin/user" list={UserList}/>
          </Admin>
    );
  }
}
export default App;

//Users.js
// in src/users.js
import React from 'react';
import { List, Datagrid, EmailField, TextField, SimpleList } from 'admin-on-rest';

export const UserList = (props) => (
    <List {...props}>
        <Datagrid >
            <TextField source="email"/>
            <TextField source="info"/>
        </Datagrid>
    </List>
);

Example of JSON

我已经用 postman 测试了我的休息调用，它肯定正在返回数据。还有无论如何可以检查通话中发回的数据吗？服务器正在运行express.js，并且我已经设置了包含所需 header 的路由。我还附上了我要返回的 JSON 的示例。

Answer 1

因为 aor fetchUtils 返回一个 promise 。您可以拦截 promise 并执行您想要的任何类型的检查(并且还可以执行更多操作)

下面是我的代码如何处理类似的事情。我还拦截 API 调用并显示自定义通知。

function handleRequestAndResponse(url, options={}) {
  return fetchUtils.fetchJson(url, options)
    .then((response) => {
      const {headers, json} = response;
      //admin on rest needs the {data} key
      const data = {data: json}
      if (headers.get('x-total-count')) {
        data.total = parseInt(headers.get('x-total-count').split('/').pop(), 10)
      }
      // handle get_list responses
      if (!isNaN(parseInt(headers.get('x-total-count'), 10))) {
        return {data: json,
                total: parseInt(headers.get('x-total-count').split('/').pop(), 10)}
      } else {
        return data
      }
  })
}

您可以简单地执行如下操作

return fetchUtils.fetchJson(url, options)
.then(res => {
    console.log(res)
    return res
})