javascript - Aurelia - 两个 "Fetches"出现问题，其中第二个在呈现新页面后完成并加载 localStorage

Question

我有一个 fetch 会关闭并获取 JWT token ，然后将其保存到本地存储。这有效。

然后，我将“.then”链接到初始获取，并通过一个名为另一个获取的函数从 API 获取用户名和密码，然后将其保存到本地存储。

最后的“.then”将根重置为新根。 (有效)...并且 JWT 和登录的第一次 localStorage 保存也是在 setRoot 调用开始之前完成的...

我的问题是，我发现第二次 Fetch 将用户名保存到 localStorage 是在新根页面运行其构造函数并尝试从 localStorage 获取用户名之后发生的。 localStorage 中的“用户名”尚未设置，因为第二次获取尚未完成...

在重置根之前，如何确保所有提取和所有保存到 localStorage 的操作均已成功保存？

这是我的 login.ts 文件，我在其中进行初始获取。

login(username: string, password: string) {
    this.userLogin.Username = username;
    this.userLogin.Password = password;

    // Lets do a fetch!
    const task = fetch("/api/jwt", {
        method: "POST",
        body: JSON.stringify(this.userLogin),
        headers: new Headers({ 'content-type': 'application/json' })
    })
        .then(response => response.json())
        .then(data => {
            console.log("data - in FETCH: ", data);
            localStorage.setItem(this.TOKEN_KEY, JSON.stringify(data));
            localStorage.setItem(this.LOGGED_IN, JSON.stringify("authenticated"));

        })
        .then(() => {
            this.saveUserDetail();
        })
        .then(() => {
            console.log(" before redirect USERNAME_KEY): ", localStorage.getItem(this.USERNAME_KEY));
            this.router.navigate('/', { replace: true, trigger: false });
            this.router.reset();
            this.aurelia.setRoot('app/app/app');
        })
        .catch(error => {
            this.clearIdentity();
        });

你可以看到我在第三个“.then”中调用了 this.saveUserDetail()，在第四个“.then”中我调用了 aurelia.setRoot('...')。

这是我的 this.saveUserDetail() 函数，第二次获取。

saveUserDetail() {
    const session = this.getIdentity();
    if (!session) {
        throw new Error("No JWT present");
    }
    const token = session.access_token;

    const headers = new Headers({
        Authorization: `bearer ${token}`,
        "Content-Type": "application/json; charset=utf-8"
    });

    const task = fetch("/api/jwt/userDetail", {
        method: "GET",
        headers
    })
        .then(response => response.json())
        .then(data => {
            try {
                console.log("data.stringify: ", JSON.stringify(data));
                localStorage.setItem(this.USERNAME_KEY, data.username);
                localStorage.setItem(this.USERROLES_KEY, data.role);
            } catch (Error) { }

            console.log("localStorage.getItem(this.USERNAME_KEY): ", localStorage.getItem(this.USERNAME_KEY));
        });
}

我的印象是我应该返回 API 来获取用户名。也许我可以一次性完成，等等，有没有一种方法可以在执行“aurelia.setroot() 之前让 localStorage 加载所有内容？

Answer 1

尝试添加return所以 this.saveUserDetail() 返回的 promise 正在等待 - 哦，等等，你需要在saveUserDetail中返回一个 promise 也是

所以

.then(() => {
    return this.saveUserDetail();
})

或

.then(this.saveUserDetail) // note, pass the function, don't call it

以及对 saveUserDetail 的更改

saveUserDetail() {
    // all your code, then at the bottom of the function add:
    return task;
}