【问题标题】:Please help me how to get data from api with a json body in GET request请帮助我如何在 GET 请求中使用 json 正文从 api 获取数据
【发布时间】:2021-11-09 16:20:24
【问题描述】:

我正在使用 react-select 实现自动完成输入。要加载自动完成选项,我需要获取一个 api。 我需要在两个端点上执行此任务,一个只是 url(我得到的这个),但这个不同:我需要发送一个包含以下内容的 json 正文: {"searcher" : "VALUE"} 其中值将是用户将查找的术语,即我归因于输入的变量。 但是我无法进行搜索,并且当我放置此代码时它没有返回任何内容,这基本上是我在只需要 URL 的端点上使用的逻辑。我哪里错了?

我在邮递员中有 api 的集合,我通过发送 json 正文对其进行了测试,它可以工作,但在代码中,没有

  const INITIAL_DATA = {
    value: 0,
    label: 'Selecione o Procedimento',
  };

  const [selectData, setselectData] = useState(INITIAL_DATA);
  const mapResponseToValuesAndLabels = (data) => ({
    value: data.id,
    label: data.terminologia,
  });

 async function callApi(value) {

 
     /* var data = JSON.stringify({
      "buscador": "CAP"
    }); */
    const api = axios.create({
      baseURL: `http://devsite.redetelemedicabr.com.br:3333/medsigtap/byTerminologia`,
      headers: { 
        'Content-Type': 'application/json',
        'Accept' : '*/*'
        
      },
      data :JSON.stringify({
        "buscador": "CAP"
      })

    })

    
      api.get('/').then(res => {
        console.log(res.data,'fefe')
      })
     
  
  }


  return (
    <div>
      <p></p>
      <AsyncSelect
        cacheOptions
        loadOptions={callApi}
        onChange={(data) => {
          setselectData(data);
        }}
        value={selectData}
        defaultOptions
      />

在这段代码中,我需要从 API 获取响应并将其映射为具有标签和值,以便它可以在自动完成选项中显示。

我在响应日志中只有一个空数组 [] 但是在邮递员中它可以工作,我收到了我正在寻找的东西(CAP objs)

【问题讨论】:

  • How do I ask a good question? -> “写一个总结具体问题的标题
  • 不要暴露真实的 url,因为有人可以使用它来提取信息,这可能是机密的。也许在您的网址上您没有任何机密信息,但要小心。

标签: javascript reactjs api fetch react-select


【解决方案1】:

问题是您没有正确发送数据

像这样发送 jsonData:

const rawResponse = await fetch(url, {
  method: 'POST',
  body: JSON.stringify(jsonData),
});

const response = rawResponse.json().map(mapResponseToValuesAndLabels);

【讨论】:

  • 另外,将您的 api 调用分离到另一个文件中总是好的,我通常将文件命名为文件提供者或服务
  • 此端点接受的唯一方法是 GET
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-15
  • 2022-01-05
  • 1970-01-01
  • 1970-01-01
  • 2011-10-14
  • 2019-08-17
相关资源
最近更新 更多