在 Fetch API 之外获取“未定义”值答案

【问题标题】：Getting 'Undefined' value outside Fetch API在 Fetch API 之外获取“未定义”值
【发布时间】：2021-12-24 15:41:44
【问题描述】：

我是 react native 的新手，试图将 fetch API 响应值分配给局部变量。但外部函数显示变量的未定义值。

这里是代码

const {
    diesel_data
} = this.state

let currentHMR
let previous_HMR
let previous_EstEngHours
let isViolationPass_HMR

let asset_id = diesel_data[0].diselRequisitionDetails[0].asset_id
let current_hmr = diesel_data[0].diselRequisitionDetails[0].current_hmr
let requisitionId = diesel_data[0].requisitionId

this._indicator.startActivity()
fetch(url + 'Norms/DieselHmrViolation/' + asset_id + '/' + current_hmr + '/' + requisitionId, {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
    },
})
    .then((response) => response.json())
    .then((json) => {
        this._indicator.stopActivity()
        var list = json;
        console.log(list)
        if (!isBlank(list)) {
            currentHMR = list.currentHMR
            previous_HMR = list.previous_HMR
            previous_EstEngHours = list.previous_EstEngHours
            isViolationPass_HMR = list.isViolationPass_HMR

        }
    })
    .catch((error) => {
        console.error(error);
    });

console.log('currentHMR', currentHMR)

【问题讨论】：

javascript 在运行此行之前不会等待 fetch 完成 console.log('currentHMR', currentHMR)
@ksav 那我现在该怎么办
将console.log('currentHMR', currentHMR)移动到currentHMR = list.currentHMR之后
@ksav 但我想要外面的值
最简单的方法是将 fetch 返回的值设置为组件状态。见reactjs.org/docs/state-and-lifecycle.html

标签： react-native fetch-api

【解决方案1】：

我认为你可以这样做，等到执行 fetch （也许你必须将它移动到 async 函数中）

let data;

await fetch('https://reqres.in/api/users/2', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
    }
})
    .then(res => res.json())
    .then(res => data = res)
    .catch(err => console.log(err))

console.log('data', data);

【讨论】：