جافاسكريبت - أنجولار كيفية انتظار الاشتراك

أنا مبتدئ فيما يتعلق بتطبيقات Angular. لا أفهم بالضبط كيف يعمل subscribe. العقبة الحالية بالنسبة لي هي أنني لا أفهم لماذا يتم تنفيذ console.log("B") قبل console.log("A")، وبالتالي عرض نتيجة مصفوفة فارغة (انظر الروابط لمخرجات console).

حاولت وضع كل الشيفرة في دالة باستخدام async/await للانتظار للدالة. لا أفهم لماذا لا تعمل.

ما هي أفضل طريقة في هذه الحالة للانتظار للحصول على اشتراك؟

يجب تنفيذ console.log("B") بعد console.log("A").

this._roleService.getRoleTypes(this.token).subscribe(
    response => {
        if(response.status != "error" && response.code != 400){
            let _roleTypes:Array<RoleType> = new Array<RoleType>(); 
            _roleTypes = new Array<RoleType>();
            response.data.forEach(rt => {
                let roleType:RoleType = new RoleType(
                    rt.id,
                    rt.name
                );
                _roleTypes.push(roleType);
            });
            console.log("A");
            console.log(_roleTypes);
            this.roleTypes = _roleTypes;
        }
        else{
            this._loginService.destroySession();
        }
    },error => {
        this.errorMessage = <any>error;
        if(this.errorMessage != null){
            console.log(this.errorMessage);
            alert("Petition Error");
        }
    }
);
console.log("B");
console.log(this.roleTypes);

• رمز
• وحدة التحكم

الإجابة رقم 1

يمكنك تحقيق ذلك باستخدام طريقة firstValueFrom. إنها أيضًا طريقة رائعة للتعامل مع العمليات غير المتزامنة. فقط قم بإزالة الاشتراك وأضف هذه الطريقة وأضف كلمة async المفتاحية في الطريقة التي تستدعي منها هذه الطريقة.

مثال-

 const response = await firstValueFrom(this._roleService.getRoleTypes(this.token));

إذن، الآن ستحصل أولاً على console.log("A") ثم console.log("B").

تحديث: firstValueFrom متاح فقط من RxJS الإصدار 7 فصاعدًا. إذا كنت تستخدم RxJS الإصدار 6 أو أقل، فستحتاج إلى استخدام .ToPromise(). إذًا:

 const response = await this._roleService.getRoleTypes(this.token).ToPromise();

الإجابة رقم 2

يجب أن تستخدم async/await إذا كنت بحاجة إلى تنفيذ كودك بشكل متزامن. قم بتغليف كود الاشتراك الخاص بك في دالة تُرجع وعدًا.

async getRolestypes(): Promise<Array<RoleType>> {

   return new Promise((resolve, reject) => {

     this._roleService.getRoleTypes(this.token).subscribe(
       response => {
         if(response.status != "error" && response.code != 400){
          let _roleTypes:Array<RoleType> = new Array<RoleType>(); 
          _roleTypes = new Array<RoleType>();
          response.data.forEach(rt => {
            let roleType:RoleType = new RoleType(
                rt.id,
                rt.name
            );
            _roleTypes.push(roleType);
           });
          console.log("A");
          console.log(_roleTypes);
          resolve(_roleTypes);
       }
       else{
           this._loginService.destroySession();
           reject('not a good response')
       }
       },error => {
        this.errorMessage = <any>error;
        if(this.errorMessage != null){
           reject(this.errorMessage);
        }
      }
    );


  })


}


this.roleTypes = await getRolestypes();
console.log(this.roleTypes);