承诺和异步操作的问题

Question

我必须向服务器发出 HTTP POST 请求，等待服务器响应，然后发出另一个请求（这会将服务器响应的一些数据发送回服务器）。我认为这是一项简单的任务，我做了这样的事情：

 const promise = new Promise((resolve, reject) => {

        resolve(this.updatePU(name, 'text', selectedOption.code));

      })

      promise.then(() => {

        console.log('Calling checkExpress function');

        let express = '';

        const puOrderNo = this.props.puOrderNo;

        fetch('/CheckExpress', {

          crossDomain: true,

          method: 'POST',

          headers: {

            'Accept': 'text/xml',

            'Content-Type': 'application/json',

          },

            body: JSON.stringify({"puOrderNo": puOrderNo })

        })

        .then(response => response.text())

        .then(str => {  

            express = convert.xml2json(str);

        }).then(() => {

            const data = JSON.parse(express);

            const checkExpress = data['elements'][0].elements[0].elements[0].elements[0].elements[0].text;

            console.log('checkExpress:', checkExpress);

            if(checkExpress === 'true'){

              this.props.updatePackageTypeField(true)

            } else {

              this.props.updatePackageTypeField(false);

            }

        })

        .catch(err => console.log(err));

      })

updatePU 函数也是一个异步函数：

 updatePU = (name, type, value) => {

    const PUOrderNo = this.props.puOrderNo;

    const updatedValue = type === 'text' ? (`'${name}': '${value}'`) : (`'${name}': ${value}`);

    fetch('/ModifyPUOrder', {

      crossDomain: true,

      method: 'POST',

      headers: {

        'Accept': 'application/json',

        'Content-Type': 'application/json',

      },

        body: JSON.stringify({

          updatedValue: updatedValue,

          puOrderNo: PUOrderNo

        }),

    })

    .then(response => {

      if(response.ok){

        return response.json();

      } else {console.log(response)}

      throw new Error('Request failed!');

    }, networkError => {

      console.log(networkError.message);

    })

结果是 promise 被忽略了（我认为）并且第二个请求在第一个请求之前发出！我知道问题在于 promise 中解决的函数也是一个异步函数，但我不知道该怎么做。

Answer 1

主要问题是updatePU不返回承诺。您应该通过return在 前面添加来返回承诺链的结果fetch：return fetch('/ModifyPUOrder', {然后在顶部的代码中，不要创建新的承诺，使用来自的承诺updatePU：this.updatePU(name, 'text', selectedOption.code).then(() => {    console.log('Calling checkExpress function');    // ...还有第二个（基本上不相关的）问题：您正在将网络错误（拒绝）转换为履行：.then(response => {  if(response.ok){    return response.json();  } else {console.log(response)}  throw new Error('Request failed!');}, networkError => {                 // ***  console.log(networkError.message); // *** Converts rejection to fulfillment with `undefined`})                                   // ***请记住，链中的每个处理程序都会转换通过它的内容。不抛出或返回拒绝的承诺的拒绝处理程序将拒绝转换为履行。不要在console.log任何地方添加转储错误，只需传播链，并且在无法进一步传播链的顶层，只需添加一个.catch报告/处理错误的 final （您在第一个代码块中确实有） .有关这方面的***注释和其他一些事情，请参阅评论：updatePU = (name, type, value) => {    const PUOrderNo = this.props.puOrderNo;    const updatedValue = type === 'text' ? (`'${name}': '${value}'`) : (`'${name}': ${value}`);    return fetch('/ModifyPUOrder', {      crossDomain: true,      method: 'POST',      headers: {        'Accept': 'application/json',        'Content-Type': 'application/json',      },        body: JSON.stringify({          updatedValue: updatedValue,          puOrderNo: PUOrderNo        }),    })    .then(response => {      if(response.ok){        return response.json();      } // *** No console.log here      throw new Error('Request failed!'); // *** I wouldn't hide what happened, perhaps: `throw new Error("HTTP error " + response.status);`    }/* ***No rejection handler here */)    .then(data => {      if ("error" in data) {        alert(data.error.message);        this.refresh();        // *** You presumably want to return here or use `else` so you don't update the form below...?      }      this.props.updatePUOrderForm(data);    });}