Ular HTTP অনুরোধটি থেকে কৌণিক উত্তরগুলি না আসা পর্যন্ত কীভাবে অপেক্ষা করবেন?


93

আমি কয়েকটি ডেটা ব্যবহার করছি যা একাধিক পৃষ্ঠায় একটি বিশ্রাম পরিষেবা থেকে। সুতরাং আমি এর জন্য কৌণিক কারখানাগুলি ব্যবহার করছি। সুতরাং, সার্ভার থেকে আমার একবার ডেটা পাওয়ার দরকার ছিল এবং প্রতিবার আমি সেই সংজ্ঞায়িত পরিষেবাটি দিয়ে ডেটা পাচ্ছি। ঠিক একটি গ্লোবাল ভেরিয়েবলের মতো। নমুনাটি এখানে:

var myApp =  angular.module('myservices', []);

myApp.factory('myService', function($http) {
    $http({method:"GET", url:"/my/url"}).success(function(result){
        return result;
    });
});

আমার নিয়ামক হিসাবে আমি এই পরিষেবাটি ব্যবহার করছি:

function myFunction($scope, myService) {
    $scope.data = myService;
    console.log("data.name"+$scope.data.name);
}

এটি আমার প্রয়োজন অনুসারে কাজ করছে working তবে এখানে সমস্যাটি হ'ল আমি যখন আমার ওয়েবপৃষ্ঠায় পুনরায় লোড করব তখন পরিষেবাটি আবার কল হবে এবং সার্ভারের জন্য অনুরোধ করবে। যদি "ডিফাইন্ডড সার্ভিস" এর উপর নির্ভরশীল অন্য কোনও ক্রিয়াকলাপ সম্পাদন করে তবে এটি "কিছু" এর মতো ত্রুটি প্রদান করছে যা অপরিজ্ঞাত। সুতরাং পরিষেবাটি লোড না হওয়া পর্যন্ত আমি আমার স্ক্রিপ্টে অপেক্ষা করতে চাই। আমি এটা কিভাবে করবো? কৌণিকভাবে কি এখনও আছে?

উত্তর:


150

আপনার async ক্রিয়াকলাপের জন্য প্রতিশ্রুতি ব্যবহার করা উচিত যেখানে এটি কখন শেষ হবে জানেন। একটি প্রতিশ্রুতি "এমন একটি অপারেশন প্রতিনিধিত্ব করে যা এখনও সম্পূর্ণ হয়নি, তবে ভবিষ্যতে প্রত্যাশিত।" ( https://developer.mozilla.org/en/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / গ্লোবাল_অবজেক্টস / প্রমিস )

উদাহরণ বাস্তবায়ন যেমন হবে:

myApp.factory('myService', function($http) {

    var getData = function() {

        // Angular $http() and then() both return promises themselves 
        return $http({method:"GET", url:"/my/url"}).then(function(result){

            // What we return here is the data that will be accessible 
            // to us after the promise resolves
            return result.data;
        });
    };


    return { getData: getData };
});


function myFunction($scope, myService) {
    var myDataPromise = myService.getData();
    myDataPromise.then(function(result) {  

       // this is only run after getData() resolves
       $scope.data = result;
       console.log("data.name"+$scope.data.name);
    });
}

সম্পাদনা করুন: সুজয়দের সম্পর্কে মন্তব্য যে আমার কী করা দরকার যাতে আমার ফ্যাকশন () কলটি ফিরে না আসে। ততক্ষণে () ফাংশনটি সম্পাদন শেষ না করে।

function myFunction($scope, myService) { 
    var myDataPromise = myService.getData(); 
    myDataPromise.then(function(result) { 
         $scope.data = result; 
         console.log("data.name"+$scope.data.name); 
    }); 
    console.log("This will get printed before data.name inside then. And I don't want that."); 
 }

ঠিক আছে, ধরুন, getData () এর কলটি সম্পূর্ণ হতে 10 সেকেন্ড সময় নিয়েছে। যদি সেই সময়ে যদি ফাংশনটি কিছু না ফেরায় তবে কার্যকরভাবে এটি সাধারণ সিঙ্ক্রোনাস কোডে পরিণত হবে এবং ব্রাউজারটি সম্পূর্ণ না হওয়া পর্যন্ত স্তব্ধ হয়ে যাবে।

প্রতিশ্রুতি তত্ক্ষণাত্ ফিরে আসার পরেও, ব্রাউজারটি এর মধ্যে অন্য কোডের সাথে চালিয়ে যেতে মুক্ত। প্রতিশ্রুতি একবারে সমাধান / ব্যর্থ হলে তত্ক্ষণাত () কলটি ট্রিগার হয়ে যায়। সুতরাং এটি এইভাবে আরও বেশি অর্থবোধ করে, এমনকি যদি এটি আপনার কোডের প্রবাহকে আরও জটিল করে তুলতে পারে (জটিলতা সাধারণভাবে সাধারণভাবে async / সমান্তরাল প্রোগ্রামিংয়ের একটি সাধারণ সমস্যা!)


4
এটা আমার সমস্যা সমাধান !!! অন্য কারও জন্য আমার কাছে একটি ড্রপডাউন ছিল যার এজ্যাক্স কল থেকে ডেটা দরকার ছিল, তাই যখন সুযোগটি তৈরি করা হয়েছিল তখন ডেটা উপলব্ধ ছিল না। এই মুলতুবি দিয়ে, সুযোগটি আজাক্স কল থেকে ডেটা আসার জন্য বরাদ্দ করা যেতে পারে।
ক্যাট লিম রুইজ

8
@ মিকেল: আমার এখানে আরও একটি প্রশ্ন আছে। আপনার মাই ফ্যাকশন () কলটি তত্ক্ষণাত্ ফিরে আসবে তবে সেই প্রতিশ্রুতি then তবে () পরে ফোন করবে। আমার কী করতে হবে যাতে। My (ফাংশন) সম্পাদন শেষ না হওয়া অবধি মাই ফাকশন () কলটি ফিরে আসবে না। function myFunction($scope, myService) { var myDataPromise = myService.getData(); myDataPromise.then(function(result) { $scope.data = result; console.log("data.name"+$scope.data.name); }); console.log("This will get printed before data.name inside then. And I don't want that."); }
সুজয়

13

এতে নতুন লোকের জন্য আপনি কলব্যাকও ব্যবহার করতে পারেন উদাহরণস্বরূপ:

আপনার পরিষেবা:

.factory('DataHandler',function ($http){

   var GetRandomArtists = function(data, callback){
     $http.post(URL, data).success(function (response) {
         callback(response);
      });
   } 
})

আপনার নিয়ামক মধ্যে:

    DataHandler.GetRandomArtists(3, function(response){
      $scope.data.random_artists = response;
   });

দুর্দান্ত সমাধান। আমি যখন এটি সন্ধান করছিলাম তখন এই একই লাইনের সাথে ভাবছিলাম। খুশী কেউ এটা এখানে রাখল।
Nate

0

এফওয়াইআই, এটি অ্যাঙ্গুলারফায়ার ব্যবহার করছে যাতে এটি কোনও আলাদা পরিষেবা বা অন্য ব্যবহারের ক্ষেত্রে কিছুটা আলাদা হতে পারে তবে একই আইস $ HTTP- র সমাধান করা উচিত। আমার কাছে এই একই সমস্যার সমাধান ছিল যা আমার পক্ষে সবচেয়ে উপযুক্ত ছিল সমস্ত পরিষেবা / কারখানাগুলিকে একক প্রতিশ্রুতি হিসাবে স্কোপগুলিতে একত্রিত করা। প্রতিটি রুটে / ভিউতে এই পরিষেবাগুলি / ইত্যাদি লোড করার জন্য প্রয়োজন ছিল এমন কোনও ফাংশন রাখি যার জন্য লোড হওয়া ডেটা প্রয়োজন নিয়ামক ফাংশনের মধ্যে যেমন মাইফান্ট () এবং মূল অ্যাপ্লিকেশন। Js চালানোর পরে চালানো হয় লেখার পরে

myservice.$loaded().then(function() {$rootScope.myservice = myservice;});

এবং ভিউ আমি সবেমাত্র করেছি

ng-if="myservice" ng-init="somevar=myfunct()"

প্রথম / প্যারেন্ট ভিউ এলিমেন্ট / মোড়কে যাতে নিয়ামক ভিতরে সমস্ত কিছু চালাতে পারে

myfunct()

async প্রতিশ্রুতি / আদেশ / সারি সমস্যা সম্পর্কে চিন্তা না করে। আমি আশা করি যে আমার যে একই সমস্যাগুলির সাথে কাউকে সহায়তা করে।


0

আমার একই সমস্যা ছিল এবং এগুলি যদি আমার পক্ষে কাজ করে তবে কিছুই নয়। যদিও এখানে কাজ করেছে ...

app.factory('myService', function($http) {
    var data = function (value) {
            return $http.get(value);
    }

    return { data: data }
});

এবং তারপরে যে ফাংশনটি এটি ব্যবহার করে তা হ'ল ...

vm.search = function(value) {

        var recieved_data = myService.data(value);

        recieved_data.then(
            function(fulfillment){
                vm.tags = fulfillment.data;
            }, function(){
                console.log("Server did not send tag data.");
        });
    };

পরিষেবাটি প্রয়োজনীয় নয় তবে আমি মনে করি এটি এক্সটেনসিবিলিটির জন্য একটি ভাল অনুশীলন। আপনার একের জন্য যা প্রয়োজন তা বেশিরভাগই অন্য যে কোনওর জন্য বিশেষত API ব্যবহার করার সময়। যাইহোক আমি আশা করি এটি সহায়ক ছিল।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.