JavaScript提取要求通过身体的API令牌

Question

我正在尝试使用JavaScript获取以与API服务进行通信建立前端。

我必须使用POST方法来生成一个令牌，该方法在身体中发送apikey参数，然后我必须使用令牌生成的令牌并将其发送到另一个帖子中，包括日期参数：Fechainicio（startDate），Fechafinal（CurrentDate），以检索数据。

这就是它在Postman（请求令牌）中的外观：

​

这是我到目前为止所拥有的：

        <div>
        <table>
            <thead>
                <tr>
                    <th>numeroConsecutivo</th>
                    <th>condicionVenta</th>
                </tr>
            </thead>
            <tbody id="data">
            </tbody>
        </table>
    </div>
    <script>
        let url = 'https://www.fakeurl.com/webservices/bills.php';//fake
        const apiKey = '+%a4Ur734687631';///fake
        const fechaInicio = "19990101"; //Initial Date
        var fechaFinal = new Date(); //Get current Date, format: 20220416
        var dd = String(fechaFinal.getDate()).padStart(2, '0');
        var mm = String(fechaFinal.getMonth() + 1).padStart(2, '0'); //January is 0!
        var yyyy = fechaFinal.getFullYear();
        fechaFinal = yyyy + mm + dd; 

        fetch(url),{
            method: 'POST',
            body: {
                'apiKey': (apiKey) 
            }
            
        .then(response => response.json())//Get Token
        .then(token => displayToken(token))
        .catch(error => console.log(error))
        },

        fetch(url),{
            method: 'POST',
            body: {
                'token': (token), 
                'fechaInicio': (fechaInicio),
                'fechaFinal': (fechaFinal) 
            }
            
            .then(response => response.json())
            .then(data => displayData(data))
            .catch(error => console.log(error)),

            const displayData = (data) => {
            console.log(data)
            let body = ""
            for (var i = 0; i < data.length; i++) {
                body += `<tr><td>${data[i].numeroConsecutivo}</td><td>${data[i].condicionVenta}</td></tr>`
            }
            document.getElementById('data').innerHTML = body
            //console.log(body)
            }
        }       
    </script>

任何帮助都将不胜感激！

Answer 1

由于您的第二个提取请求取决于第一个请求，因此最好链接请求 - 仅在获得第一个请求的响应后才提出第二个请求。

然后，关于第二个请求的成功，我们修改dom。我们也可以使用回调，但这更可读。

<div>
  <table>
    <thead>
      <tr>
        <th>numeroConsecutivo</th>
        <th>condicionVenta</th>
      </tr>
    </thead>
    <tbody id="data"></tbody>
  </table>
</div>
<script>
  let url = 'https://www.fakeurl.com/webservices/bills.php' //fake
  const apiKey = '+%a4Ur734687631' ///fake
  const fechaInicio = '19990101' //Initial Date
  var fechaFinal = new Date() //Get current Date, format: 20220416
  var dd = String(fechaFinal.getDate()).padStart(2, '0')
  var mm = String(fechaFinal.getMonth() + 1).padStart(2, '0') //January is 0!
  var yyyy = fechaFinal.getFullYear()
  fechaFinal = yyyy + mm + dd
  const displayData = (data) => {
    console.log(data)
    let body = ''
    for (var i = 0; i < data.length; i++) {
      body += `<tr><td>${data[i].numeroConsecutivo}</td><td>${data[i].condicionVenta}</td></tr>`
    }
    document.getElementById('data').innerHTML = body
    //console.log(body)
  }

  fetch(url, {
    method: 'POST',
    body: {
      apiKey: apiKey,
    },
  })
    .then((response) => response.json()) //Get Token
    .then((token) => {
      displayToken(token)
      return fetch(url, {
        method: 'POST',
        body: {
          token: token,
          fechaInicio: fechaInicio,
          fechaFinal: fechaFinal,
        },
      })
    })
    .then((response) => response.json())
    .then(displayData)
    .catch((error) => console.log(error))
</script>