承诺和异步操作的问题

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);

    });

}