تایپاسکریپت - اینترسپتور Axios - چگونه پاسخ را از فروشگاه vuex بازگردانیم

من یک فرم ورود دارم. وقتی کاربر نام کاربری/رمز عبور را وارد میکند، اینترسپتور axios پاسخ از API را مدیریت میکند، چه خوب باشد چه بد.

سپس پاسخ از طریق فروشگاه Vuex من هدایت میشود، جایی که اطلاعات کاربری تنظیم میشوند.

با این حال، وقتی که من response را در کامپوننت Login خودم با console.log نمایش میدهم، در واقع فیلدهایی که نیاز دارم مثل data, status, headers و غیره را نمیبینم. من این را میبینم

آیا راهی وجود دارد که بتوانم بهگونهای تایید کنم دادههایم در فروشگاه قرار دارند قبل از اینکه به ورود کاربر ادامه دهم؟

تنها چیزی که در این لحظه به ذهنم میرسد استفاده از یک setTimeout برای ۳ ثانیه و فراخوانی یک getter وضعیت برای بازیابی دادههای کاربر است.. منظورم این است که کار میکند اما مطمئنم راه حل مناسبتری هم وجود دارد

ورود.vue

onClickLogin() {
    const userToLogin = {
      username: this.loginForm.username,
      password: this.loginForm.password
    };
    const response = UsersModule.login(userToLogin);

    console.log("response", response); // returns what is pictured in the image above so the if block is technically wrong
    if (response) {
      this.$router.push("/");
    }
  }

کلاس درخواست axios

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 5000
});

service.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    Message({
      message: error.message || "Error",
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

تابع ورود کاربران vuex

  @Action({ rawError: true })
  async login(usersSubmit: UserSubmit) {
    const response: any = await loginUser(usersSubmit);
    if (typeof response !== "undefined") {
      const { accessToken, username, name } = response;

      setToken(accessToken);
      this.SET_TOKEN(accessToken);
      this.SET_USERNAME(username);
      this.SET_NAME(name);
    }
  }

کلاس API که درخواست axios را از فروشگاه vuex فراخوانی میکند

export const loginUser = (data: UserSubmit) => {
  return request({
    url: "/auth/login",
    method: "post",
    data
  });
};

پاسخ شماره ۱

تابع login یک تابع async است، به این معنا که یک Promise برمیگرداند، همانطور که سوال توضیح میدهد.

جریان کنترل غیرهمزمان و وعدهها بهویژه مسری هستند، این باعث میشود که تمام فراخوانندگان که به آن وابستهاند نیز از وعدهها استفاده کنند. توجه داشته باشید که login هیچ چیزی باز نمیگرداند، بنابراین نمیتواند به یک پاسخ حل شود:

  async onClickLogin() {
    const userToLogin = {
      username: this.loginForm.username,
      password: this.loginForm.password
    };

    try {
      await UsersModule.login(userToLogin);
      this.$router.push("/");
    } catch (err) {
      console.error('Login failed');
    }
  }