时间戳

首页 > 解决方案 > 这是在 React 中使用带有承诺的三元 if else 的不好方法吗

javascript - 这是在 React 中使用带有承诺的三元 if else 的不好方法吗

问题描述

我使用三元 if else 来调用不同的 API（API 调用存储在另一个文件中）。

(this.props.item === "burger" ? burgerObj.GetBurger (this.props.burger_id) : pizzaObj.GetPizza (this.props.pizza_id)) // burgerObj and pizzaObj are objects of their respective classes
        .then((response) => {
            if(response.status === 400) {
              console.log ("Bad Request")
            }
            else {
                response.json()
                .then((findresponse) => {
                    this.prepareFood(findresponse) // Some function call
                })
            }
        })
        .catch ((e) => {
            console.log (e)
        })
    }


// API calls in different classes. Same is for GetPizza
GetBurger(burger_id) {
return fetch(url + 'burgerId' + burger_id , {
  headers: {
      'Authorization': 'Bearer ' + authorization,
      'Content-Type': 'application/json',
  }
})

}

这是处理此类呼叫的错误方式吗？因为当我使用这个 API 调用工作正常但代码永远不会达到承诺（.then((response) => { - 第 2 行）。如果我检查网络，我可以看到从 API 返回的响应。对不起，如果我在某个地方错了，我还是 React 的新手。请帮助我。

标签： javascriptreactjs

解决方案

使用三元是可以的。但是你可以Async/Await用来清理回调 -

const { item, burger_id, pizza_id} = this.props;

function fetchWrapper(url) {
    fetch(url, {
        headers: {
            Authorization: `Bearer${authorization}`,
            'Content-Type': 'application/json',
        }
    })
        .then(data => { return { data, error: null }; })
        .catch(error => { return { error, data: null }; });
}

// API calls in different classes. Same is for GetPizza
async function GetBurgerAsync(burgerId) {
    let response = await fetchWrapper(`url burgerId${burgerId}`);
    const data = await response.json();
    return data;
}


const foodType = item === 'burger' ? GetBurgerAsync(burger_id) : GetPizzaAsync(pizza_id);
if (foodType.data) {
    this.prepareFood(foodType);
}

编辑：重构，包装fetch，因为每次调用时只有 url 应该改变。令牌在所有调用中应该相同。

推荐阅读