什么是处理提取响应的正确方法

时间:2018-08-12 18:16:57

标签: javascript promise fetch

我有以下代码用于处理Magento 2 REST API。

return new Promise((resolve, reject) => {
      fetch(uri, { method, headers, body: JSON.stringify(data) })
        .then(response => {
          return response.json();
        })
        .then(responseData => {
          resolve(responseData);
        })
        .catch(error => {
          reject(error);
        });
    });

我想添加响应状态检查,所以我就这样开始

return new Promise((resolve, reject) => {
      fetch(uri, { method, headers, body: JSON.stringify(data) })
        .then(response => {
          return {
            data: response.json(),
            ok: response.ok,
            status: response.statusText
          };
        })
        .then(responseResult => {
          if (responseResult.ok) {
            resolve(responseResult.data);
          } else {
            const error = responseResult.status || responseResult.data.message;
            reject(error);
          }
        })
        .catch(error => {
          reject(error);
        });
    });

Magento将错误文本保留在data.message中,但是response.json()返回了一个Promise而不是data

处理这种情况的正确方法是什么?

更新 响应像 enter image description here

2 个答案:

答案 0 :(得分:5)

您将成为explicit Promise creation antipattern的猎物。您根本不需要在该代码中使用new Promise,并且要添加状态检查,只需在then处理程序中进行即可:

return fetch(uri, { method, headers, body: JSON.stringify(data) })
    .then(response => {
        if (!response.ok) {
            return response.json()
                .catch(() => {
                    // Couldn't parse the JSON
                    throw new Error(response.status);
                })
                .then(({message}) => {
                    // Got valid JSON with error response, use it
                    throw new Error(message || response.status);
                });
        }
        // Successful response, parse the JSON and return the data
        return response.json();
    });

现在:

  • 如果使用有效的JSON正文返回错误,我们将尝试使用解析后的JSON中的message作为错误(拒绝),如果没有错误,请使用response.status
  • 如果正文返回的错误不是有效的JSON,我们将response.status用作错误(拒绝)
  • 如果返回成功,我们将返回解析结果

答案 1 :(得分:-1)

第二次就可以了,那么您可以改用Promise.all

fetch(uri, { method, headers, body: JSON.stringify(data) })
        .then(response => {
          return Promise.all([response.json(),response])
        })
        .then(([responseData,response]) => {
          // handle data here
        })

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all