使用 Promises React 从模块导出文件中获取 API

Question

我想获取一个从模块文件 data.js 导出的 API

我收到此错误“err SyntaxError: Unexpected token

以下文件包含 API 模块

 /**
 * @typedef {object} PropertyType
 * @property {string} label - The text to display
 * @property {string} value - The enum value assigned
 */

 /**
 * Retrieve a list of all available property types.
 *
 * @returns {Promise<{ propertyTypes: PropertyType[] }>}
 */

async function getAvailablePropertyTypes() {
  await wait(randomInteger(500));

  return {
    propertyTypes: [
      { label: 'Semi-detached', value: 'semi-detached' },
      { label: 'Detached house', value: 'detached' },
      { label: 'Terraced house', value: 'terraced' },
      { label: 'Flat', value: 'flat' },
    ]
  };
}

export {getAvailablePropertyTypes};

以下文件包含导入的 API app.js

我认为我在这一行没有正确获取 const response = await fetch(getAvailablePropertyTypes.propertyTypes)

如何从这个函数中获取 getAvailablePropertyTypes.propertyTypes ??

import  {getAvailablePropertyTypes} from './properties'
import { useEffect } from 'react'

function App() {

useEffect( async () => {
      const response = await fetch(getAvailablePropertyTypes.propertyTypes)
      const data = await response.json()
      .then(res => {
        console.log('res', res)
      })
      .catch(err => {
        console.log('err', err)
      })
    }, [])
    
    return (
    <div className="App">
    </div>
  );
}

Answer 1

getAvailablePropertyTypes 是一个函数。它没有propertyTypes 属性，因此您将为此获得undefined。

undefined 不是任何有用的 URL，因此当您向它发出网络请求时会收到错误页面。错误页面不是 JSON，因此是错误消息。

此代码附近没有任何 URL。涉及fetch 根本没有意义。

fetch 对于从实现为 Web 服务的 API 获取数据很有用。它不会帮助您处理其他类型的 API，包括这个只是处理内部数据的一些函数。

所以让我们回到开始，看看你有什么。

---

getAvailablePropertyTypes 是一个函数。就这样吧。

const ret_value = getAvailablePropertyTypes();

它是async，所以它返回一个承诺，所以等待它。

const data = await ret_value;

promise 的解析值是一个确实具有propertyTypes 值的对象。所以提取它。

const { propertyTypes } = data;

现在这是一个数组，您可以随心所欲地使用它

console.log(propertyTypes);