我想在 .subscribe 中创建一个本地存储，但它会在所有功能之后创建本地存储答案

【问题标题】：I want to create a localstorage inside a .subscribe but it creates the localstorage after all the functions我想在 .subscribe 中创建一个本地存储，但它会在所有功能之后创建本地存储
【发布时间】：2020-03-09 23:18:21
【问题描述】：

我正在尝试在表单中检查用户是否存在于具有角度的 MySQL 数据库中。我在 .subscribe 中创建了一个 localstorage 项目，所以如果用户存在，它会创建一个这样的 localstorage：

localStorage.setItem("exist","true");

但如果它不存在，则这样做：

localStorage.setItem("exist","false");

在函数之后我检查它是真还是假，但它是空的，因为 .subscribe 在所有函数之后。因此，如果我第二次检查它会使本地存储项正确。

this.userService.getAutor(id)
  .subscribe(
    (data) => { // Successins
      localStorage.setItem("exist","true");
    },
    (error) => { // error
      localStorage.setItem("exist","false");
    }
  );
}

这是我调用函数的地方

  this.usuarioExiste(this.dniAutor);

      if(localStorage.getItem('existe') == 'false'){
        var expReg = /^(\d{8})([A-Z])$/;

        if(expReg.test(this.dniAutor)){

          this.userService.crearAutor(JSONform)
          .subscribe(

            (data) => { // Success
              console.log("¡Bien HECHO!");
            }
          );
          alert("Autor añadido correctamente");
        }
else{
  alert("Dni mal introducido")
}

【问题讨论】：

当用户不存在时userService.getAutor肯定会出错吗？
是的，因为它是一个get请求，所以如果你请求一个不存在的id它会返回false
但是http响应返回什么状态码？
我真的不知道，我只想在 .subscribe 完成时返回或创建一个 var，但稍后它不会这样做。
如你所说，.subscribe 完成了所有功能。因为，.getAutor 返回一个 observable 并且它是异步的。您已在订阅中添加检查逻辑。

标签： javascript angular

【解决方案1】：

在函数之后我检查它是真还是假，但它是空的

错误的方式

this.userService.getAutor(id)
  .subscribe(
    (data) => { // Successins
      localStorage.setItem('existe',"true"); // <-- called after functionCheckIfTrueOrFalse, NO DATA in storage yet
    },
    (error) => { // error
      localStorage.setItem('existe',"false"); // <-- called after functionCheckIfTrueOrFalse, NO DATA in storage yet
    }
  );
}
functionCheckIfTrueOrFalse() // <- is called before any localStorage.setItem()

正确方法

this.userService.getAutor(id)
  .subscribe(
    (data) => { // Successins
      localStorage.setItem('existe',"true");
      functionCheckIfTrueOrFalse() // <- localStorage HAS the data
    },
    (error) => { // error
      localStorage.setItem('existe',"false");
      functionCheckIfTrueOrFalse() // <- localStorage HAS the data
    }
  );
}

知识

如果您想花时间了解其背后的工作原理，可以查看this article。

简而言之，JavaScript 处理异步线程的方式不同：

你得到null是因为你在从异步线程获取数据之前从同步队列读取数据。

【讨论】：

哇，谢谢！！我目前正在学习 typeScript 和 Java，这非常有用！检查它是否有效
请注意，“Java”和“JavaScript”是不同的；）。如果您是 JS 和 TS 的新手，那么这些都是不错的起点：developer.mozilla.org/en-US/docs/Web/JavaScript、typescriptlang.org。祝你好运！
你也可以在完整回调中调用functionCheckIfTrueOrFalse()

【解决方案2】：

正如库尔特所说，我的回答需要一个解释。

所以我会在下面尽力而为：

由于调用的异步性质，您必须首先检查在订阅方法中数据是否可用。只有这样，您才能按照自己的意愿访问本地存储。

注意：您也可以使用过滤器运算符，如filter(data => data) 来跳过 if 条件，但前提是您不想在数据不存在时访问本地存储。

 this.userService.getAutor(id).subscribe(data => {
      if (data) {
        localStorage.setItem('existe', 'true');
      } else {
        localStorage.setItem('existe', 'false');
      }
    });

【讨论】：

我认为解释为什么你认为这可能会帮助这里的 OP

【解决方案3】：

终于成功了！

我使用了 0leg 的建议，它奏效了！

this.userService.getAutor(id).subscribe(data => {
      if (data) {
        localStorage.setItem('existe', 'true');
      } else {
        localStorage.setItem('existe', 'false');
      }
    });

Many thanks to all!

Have a nice day!

【讨论】：