问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

javascript 如何将 fetch 的结果保存到一个变量？

头像
imimbert
    31
    新手上路，请多包涵

    javascript 如何将 fetch 的结果保存到一个变量

    var uuid;

        var myHeaders = new Headers();
        myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
        myHeaders.append("Content-Type", "application/json");

        function send() {
            var raw = JSON.stringify({
                "email": email.value
            });

            var requestOptions = {
                method: 'POST',
                headers: myHeaders,
                body: raw,
                redirect: 'follow'
            };

            fetch("http://127.0.0.1:3000/email", requestOptions)
                .then(response => response.json())
                .then(result => {
                    uuid = result;
                })
                .then(result=>{
                    console.log(result);
                })
                .catch(error => console.log('error', error));
        }

    这是我的代码。当我执行这段代码，uuid仍没有被赋值，并且 result 输出了undefined

    我尝试过将 result 保存至 window.uuid，但是也没有被赋值。
    我需要在这个函数外面使用uuid。

    javascriptfetch-apiasync-awaitpromisevariable-assignment
    阅读 305
    avatarAI BotBETA

    回答

    在 JavaScript 中使用 fetch 时，由于其基于 Promise 的异步性质，你不能直接在同步代码块中获取到 fetch 的结果。在你的代码中，uuid 变量在 fetch 的 .then() 回调中被赋值，但在 fetch 完成之前，任何同步代码都已经执行完毕了。这就是为什么 uuid 看起来没有被赋值的原因。

    此外，你的第二个 .then() 回调中的 result 参数实际上是未定义的，因为第一个 .then() 回调返回的是 undefined（除非你显式地返回了一个值）。第一个 .then() 回调只是修改了外部的 uuid 变量，并没有返回任何值。

    要解决这个问题，你可以考虑以下几种方法：

    1. 使用 async/await 语法：这可以使你的代码看起来更像同步代码，更容易理解和维护。
    2. 确保在 .then() 链中正确处理数据：只在需要的地方处理数据，而不是尝试在链外访问它。

    下面是使用 async/await 语法修改后的代码示例：

    var uuid;

var myHeaders = new Headers();
myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
myHeaders.append("Content-Type", "application/json");

async function send() {
    var raw = JSON.stringify({
        "email": email.value
    });

    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
    };

    try {
        let response = await fetch("http://127.0.0.1:3000/email", requestOptions);
        let result = await response.json();
        uuid = result;
        console.log(uuid); // 现在这里可以正确输出 uuid
    } catch (error) {
        console.log('error', error);
    }
}

    在这个修改后的版本中，send 函数现在是异步的，使用 await 等待 fetch 和 response.json() 的结果。这样，你就可以在 try 块中直接处理 result 并将其赋值给 uuid，同时保证这个赋值在 console.log(uuid) 执行前已经完成。

    1 个回答
    得票最新
    头像
    zcf0508
      778129
      ✓ 已被采纳
      let uuid;

const myHeaders = new Headers();
myHeaders.append('User-Agent', 'Apifox/1.0.0 (https://apifox.com)');
myHeaders.append('Content-Type', 'application/json');

function send() {
  const raw = JSON.stringify({
    email: email.value,
  });

  const requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow',
  };

  fetch('http://127.0.0.1:3000/email', requestOptions)
    .then(response => response.json())
    .then((result) => {
      uuid = result;
      // 这里没有 return
    })
    .then((result) => { // 所以这里的 result 是 undefined
      console.log(result);
    })
    .catch(error => console.log('error', error));
}

console.log(uuid); // 由于 fetch 是异步的，你在这里打印 uuid 时接口还没返回。

      如果你是希望在 fetch 返回后才使用 uuid，那推荐按照 ai 的回答一样使用 async/await 来控制数据流。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏