كيف يمكنني جعل دالة تنتظر إنتهاء دالة أخرى في ملف آخر قبل أن تبدأ عملها؟

يمكنك استخدام الوعود (promises) لتنفيذ دالتين غير متزامنتين بشكل متسلسل. على سبيل المثال، إذا كانت دالتك الأولى تسمى a والثانية تسمى b، يمكنك كتابة الشفرة التالية:

a().then(resA => {
  // resA هو الاستجابة لدالة a()
  // افعل ما تريد مع resA هنا
  // ثم ارجع وعد لدالة b()
  return b();
})
.then(resB => {
  // resB هو الاستجابة لدالة b()
  // افعل ما تريد مع resB هنا
})
.catch(err => {
  // اتعامل مع أي رفض/خطأ للدالتين a أو b
});

هذا يضمن أن دالة b() لن تبدأ حتى تنتهي دالة a() وترجع وعدًا. يمكنك قراءة المزيد عن هذه الطريقة في .

إذا كانت دالتك الأولى في ملف مختلف عن دالتك الثانية، فستحتاج إلى استيرادها باستخدام require أو import حسب نوع الوحدات التي تستخدمها. على سبيل المثال، إذا كانت دالة a() في ملف a.js ودالة b() في ملف b.js، يمكنك كتابة الشفرة التالية في ملف آخر وليكن c.js :

// استيراد دالة a من ملف a.js
const a = require('./a.js');

// استيراد دالة b من ملف b.js
const b = require('./b.js');

// استخدام وعود لتنفيذ دالتين بشكل متسلسل
a().then(resA => {
  return b();
})
.then(resB => {
  // افعل شيئًا هنا
})
.catch(err => {
  // اتعامل مع الأخطاء هنا
});

في حال لم تكن الاجابة السابقة كافية، قم بمشاركة ملفات المشروع الخاص بك حتى احاول مساعدتك بشكل افضل.

أخي هذه الدالة في ملف authAction.js 

import {postDataApi} from "../../utils/fetchDataApi";

export const login = (data) => async (dispatch) => {
    try {
        const res = await postDataApi(`login`, data)
        localStorage.setItem('login', true);
        dispatch({
            type: "AUTH" ,
            payload: {
                token: res.data.access_token,
                user: res.data.user
            }
        });
        localStorage.setItem('login', true);
        console.log(res)
    }

وهذه الدالة في ملف login.jsx

import {login} from "../../redux/actions/authActions.js";

const handleChange = (e) => {
    const {name, value} = e.target;
    setUserData({...userData, [name]:value })
  }
  
  const handlevalid = async () => {
    if (auth.token) {setIsCorrect(true)}
    else {setIsCorrect(false)};
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    setUserData({email, password })
    dispatch(login(userData))
    handlevalid()
    console.log(auth)
  }

ولا أريد أن تبدأ دالة ()handlevalid أو console.log عملها إلا بعد انتهاء login التي في ملف authActions من عملها لأن أمر طباعة auth في ملف login يحدث قبل انتهاء عملية جلب البيانات فتتم طباعة أوبجكت فارغ بلا بيانات وبعدها مباشرة

تتم طباعة الداتا في المتصفح بنجاح عملية جلب البيانات

وعندما أضغط مرة أخرة على زر login تتم طباعة auth بأوبجكت يحتوي على بيانات 

كما في الصورة المرفقة

بتاريخ 50 دقائق مضت قال محمد الحربي:

أخي هذه الدالة في ملف authAction.js 

import {postDataApi} from "../../utils/fetchDataApi";

export const login = (data) => async (dispatch) => {
    try {
        const res = await postDataApi(`login`, data)
        localStorage.setItem('login', true);
        dispatch({
            type: "AUTH" ,
            payload: {
                token: res.data.access_token,
                user: res.data.user
            }
        });
        localStorage.setItem('login', true);
        console.log(res)
    }

 

وهذه الدالة في ملف login.jsx

import {login} from "../../redux/actions/authActions.js";

const handleChange = (e) => {
    const {name, value} = e.target;
    setUserData({...userData, [name]:value })
  }
  
  const handlevalid = async () => {
    if (auth.token) {setIsCorrect(true)}
    else {setIsCorrect(false)};
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    setUserData({email, password })
    dispatch(login(userData))
    handlevalid()
    console.log(auth)
  }

ولا أريد أن تبدأ دالة ()handlevalid أو console.log عملها إلا بعد انتهاء login التي في ملف authActions من عملها لأن أمر طباعة auth في ملف login يحدث قبل انتهاء عملية جلب البيانات فتتم طباعة أوبجكت فارغ بلا بيانات وبعدها مباشرة

تتم طباعة الداتا في المتصفح بنجاح عملية جلب البيانات

وعندما أضغط مرة أخرة على زر login تتم طباعة auth بأوبجكت يحتوي على بيانات 

كما في الصورة المرفقة

لكي تتأكد من أن الدالة handlevalid() وطباعة console.log(auth) تعملان بعد انتهاء عملية login()، عليك باستخدام مفهوم Promises في JavaScript.

أي عدل الكود كما يلي في ملف authAction.js:

import { postDataApi } from "../../utils/fetchDataApi";

export const login = (data) => async (dispatch) => {
  try {
    const res = await postDataApi(`login`, data);
    localStorage.setItem('login', true);
    dispatch({
      type: "AUTH",
      payload: {
        token: res.data.access_token,
        user: res.data.user
      }
    });
    localStorage.setItem('login', true);
    console.log(res);

    return res; // يتم إرجاع الاستجابة لتصبح متاحة للدالة المستدعاة
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

في ملف login.jsx:

import { login } from "../../redux/actions/authActions.js";

const handleChange = (e) => {
  const { name, value } = e.target;
  setUserData({ ...userData, [name]: value });
};

const handlevalid = async () => {
  if (auth.token) {
    setIsCorrect(true);
  } else {
    setIsCorrect(false);
  }
};

const handleLogin = async (e) => {
  e.preventDefault();
  setUserData({ email, password });

  try {
    const res = await dispatch(login(userData)); // انتظر حتى انتهاء العملية
    console.log(res); // استخدم الاستجابة المتاحة هنا

    handlevalid();
    console.log(auth);
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

مع هذه التغييرات، الآن الدالة handleLogin() ستنتظر انتهاء العملية في login() باستخدام الكلمة المفتاحية await وستحتفظ بالاستجابة في المتغير res.

بعد ذلك، تستطيع استخدام الاستجابة في console.log(res) أو أي عملية أخرى قبل استدعاء handlevalid() وconsole.log(auth).

بتاريخ 30 دقائق مضت قال Mustafa Suleiman:

لكي تتأكد من أن الدالة handlevalid() وطباعة console.log(auth) تعملان بعد انتهاء عملية login()، عليك باستخدام مفهوم Promises في JavaScript.

أي عدل الكود كما يلي في ملف authAction.js:

import { postDataApi } from "../../utils/fetchDataApi";

export const login = (data) => async (dispatch) => {
  try {
    const res = await postDataApi(`login`, data);
    localStorage.setItem('login', true);
    dispatch({
      type: "AUTH",
      payload: {
        token: res.data.access_token,
        user: res.data.user
      }
    });
    localStorage.setItem('login', true);
    console.log(res);

    return res; // يتم إرجاع الاستجابة لتصبح متاحة للدالة المستدعاة
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

في ملف login.jsx:

import { login } from "../../redux/actions/authActions.js";

const handleChange = (e) => {
  const { name, value } = e.target;
  setUserData({ ...userData, [name]: value });
};

const handlevalid = async () => {
  if (auth.token) {
    setIsCorrect(true);
  } else {
    setIsCorrect(false);
  }
};

const handleLogin = async (e) => {
  e.preventDefault();
  setUserData({ email, password });

  try {
    const res = await dispatch(login(userData)); // انتظر حتى انتهاء العملية
    console.log(res); // استخدم الاستجابة المتاحة هنا

    handlevalid();
    console.log(auth);
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

مع هذه التغييرات، الآن الدالة handleLogin() ستنتظر انتهاء العملية في login() باستخدام الكلمة المفتاحية await وستحتفظ بالاستجابة في المتغير res.

بعد ذلك، تستطيع استخدام الاستجابة في console.log(res) أو أي عملية أخرى قبل استدعاء handlevalid() وconsole.log(auth).

 

شكرا لك أخي

بتاريخ 1 ساعة قال Mustafa Suleiman:

لكي تتأكد من أن الدالة handlevalid() وطباعة console.log(auth) تعملان بعد انتهاء عملية login()، عليك باستخدام مفهوم Promises في JavaScript.

أي عدل الكود كما يلي في ملف authAction.js:

import { postDataApi } from "../../utils/fetchDataApi";

export const login = (data) => async (dispatch) => {
  try {
    const res = await postDataApi(`login`, data);
    localStorage.setItem('login', true);
    dispatch({
      type: "AUTH",
      payload: {
        token: res.data.access_token,
        user: res.data.user
      }
    });
    localStorage.setItem('login', true);
    console.log(res);

    return res; // يتم إرجاع الاستجابة لتصبح متاحة للدالة المستدعاة
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

في ملف login.jsx:

import { login } from "../../redux/actions/authActions.js";

const handleChange = (e) => {
  const { name, value } = e.target;
  setUserData({ ...userData, [name]: value });
};

const handlevalid = async () => {
  if (auth.token) {
    setIsCorrect(true);
  } else {
    setIsCorrect(false);
  }
};

const handleLogin = async (e) => {
  e.preventDefault();
  setUserData({ email, password });

  try {
    const res = await dispatch(login(userData)); // انتظر حتى انتهاء العملية
    console.log(res); // استخدم الاستجابة المتاحة هنا

    handlevalid();
    console.log(auth);
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

مع هذه التغييرات، الآن الدالة handleLogin() ستنتظر انتهاء العملية في login() باستخدام الكلمة المفتاحية await وستحتفظ بالاستجابة في المتغير res.

بعد ذلك، تستطيع استخدام الاستجابة في console.log(res) أو أي عملية أخرى قبل استدعاء handlevalid() وconsole.log(auth).

 

أخي مازال يطبع auth فارغ في الضغطة لأولى على login وعندما أضغط مرة أخرى ينجح الأمر كما كان في السابق

ولكن تأخرت الاستجابة قليلا بسبب await

أنا أريد أن يتم طباعة بيانات الـ auth من الضغطة الأولى 

والتي هي عبارة عن بيانات المستخدم و الرمز المميز token

بتاريخ 25 دقائق مضت قال محمد الحربي:

أخي مازال يطبع auth فارغ في الضغطة لأولى على login وعندما أضغط مرة أخرى ينجح الأمر كما كان في السابق

ولكن تأخرت الاستجابة قليلا بسبب await

أنا أريد أن يتم طباعة بيانات الـ auth من الضغطة الأولى 

والتي هي عبارة عن بيانات المستخدم و الرمز المميز token

حاول تغيير ترتيب الدوال  في ملف login.jsx:

import { login } from "../../redux/actions/authActions.js";

const handleChange = (e) => {
  const { name, value } = e.target;
  setUserData({ ...userData, [name]: value });
};

const handlevalid = async (res) => {
  if (res.token) {
    setIsCorrect(true);
  } else {
    setIsCorrect(false);
  }
};

const handleLogin = async (e) => {
  e.preventDefault();
  setUserData({ email, password });

  try {
    const res = await dispatch(login(userData)); // انتظر حتى انتهاء العملية
    console.log(res); // استخدم الاستجابة المتاحة هنا

    handlevalid(res); // قم بتمرير الاستجابة كمعامل للدالة
    console.log(auth);
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

قمت بنقل الاستدعاء للدالة handlevalid() بعد استلام الاستجابة من login()، وتمرير الاستجابة كمعامل للدالة handlevalid() لكي تتمكن من استخدامها فيها.

وبالتالي، يجب أن تحصل على طباعة صحيحة لـ auth من الضغطة الأولى على زر login.

وإذا استمرت المشكلة، أرجو منك رفع مجلد المشروع بعد ضغطه لتفقد المشكلة.

بتاريخ 17 دقائق مضت قال Mustafa Suleiman:

حاول تغيير ترتيب الدوال  في ملف login.jsx:

import { login } from "../../redux/actions/authActions.js";

const handleChange = (e) => {
  const { name, value } = e.target;
  setUserData({ ...userData, [name]: value });
};

const handlevalid = async (res) => {
  if (res.token) {
    setIsCorrect(true);
  } else {
    setIsCorrect(false);
  }
};

const handleLogin = async (e) => {
  e.preventDefault();
  setUserData({ email, password });

  try {
    const res = await dispatch(login(userData)); // انتظر حتى انتهاء العملية
    console.log(res); // استخدم الاستجابة المتاحة هنا

    handlevalid(res); // قم بتمرير الاستجابة كمعامل للدالة
    console.log(auth);
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

قمت بنقل الاستدعاء للدالة handlevalid() بعد استلام الاستجابة من login()، وتمرير الاستجابة كمعامل للدالة handlevalid() لكي تتمكن من استخدامها فيها.

وبالتالي، يجب أن تحصل على طباعة صحيحة لـ auth من الضغطة الأولى على زر login.

وإذا استمرت المشكلة، أرجو منك رفع مجلد المشروع بعد ضغطه لتفقد المشكلة.

هذه ملفات المشروع 

the-project-copy.rar

بتاريخ منذ ساعة مضت قال Mustafa Suleiman:

حاول تغيير ترتيب الدوال  في ملف login.jsx:

import { login } from "../../redux/actions/authActions.js";

const handleChange = (e) => {
  const { name, value } = e.target;
  setUserData({ ...userData, [name]: value });
};

const handlevalid = async (res) => {
  if (res.token) {
    setIsCorrect(true);
  } else {
    setIsCorrect(false);
  }
};

const handleLogin = async (e) => {
  e.preventDefault();
  setUserData({ email, password });

  try {
    const res = await dispatch(login(userData)); // انتظر حتى انتهاء العملية
    console.log(res); // استخدم الاستجابة المتاحة هنا

    handlevalid(res); // قم بتمرير الاستجابة كمعامل للدالة
    console.log(auth);
  } catch (error) {
    // إدارة الأخطاء هنا
  }
};

قمت بنقل الاستدعاء للدالة handlevalid() بعد استلام الاستجابة من login()، وتمرير الاستجابة كمعامل للدالة handlevalid() لكي تتمكن من استخدامها فيها.

وبالتالي، يجب أن تحصل على طباعة صحيحة لـ auth من الضغطة الأولى على زر login.

وإذا استمرت المشكلة، أرجو منك رفع مجلد المشروع بعد ضغطه لتفقد المشكلة.

بالمناسبة 

عند عملية تسجيل دخول ناجحة تظهر البيانات في الـ action في redux toolkit بشكل طبيعي

ولكن في نافذة الـ state تظهر الداتا كـ undefined كما في الصور المرفقة