জেএস একটি থ্রেডেড।

ব্রাউজার তিনটি ভাগে বিভক্ত করা যাবে:

1) ইভেন্ট লুপ

2) ওয়েব এপিআই

3) ইভেন্ট সারি

ইভেন্ট লুপটি চিরকালের জন্য চলছে যেমন অসীম লুপ। ইভেন্ট সারি যেখানে আপনার সমস্ত ফাংশন কিছু ইভেন্টে push করা হয় (উদাহরণ: ক্লিক করুন) এটি একটি সারির বাহিরে এক দ্বারা এবং ইভেন্ট লুপে ঢোকানো যা এই ফাংশনটি কার্যকর করে এবং এটি নিজে তৈরি করে প্রথমটির পরে প্রথমটির জন্য কার্যকর করা হয়। এর অর্থ হল একটি ফাংশন কার্যকর হওয়া পর্যন্ত এটি লুপে ফাংশন পর্যন্ত ইভেন্ট লুপে কার্যকর হয় না।

এখন আমাদের মনে হয় আমরা একটি সারিতে দুইটি ফাংশনকে সরিয়ে দিয়েছি সার্ভার থেকে একটি ডেটা পাওয়ার জন্য এবং অন্যটি সেই তথ্যটি ব্যবহার করে। আমরা serverRequest () ফাংশনটি প্রথমে সারিতে ব্যবহার করলাম তারপর usetilata () ফাংশনটি। serverRequest ফাংশন ইভেন্ট লুপে যায় এবং সার্ভারে একটি কল করে কারণ আমরা জানি না সার্ভার থেকে ডেটা পেতে কত সময় লাগবে তাই এই প্রক্রিয়াটি সময় লাগবে বলে আশা করা হচ্ছে এবং তাই আমরা আমাদের ইভেন্ট লুপ ব্যস্ত করে আমাদের পৃষ্ঠাটি ঝুলিয়ে রাখি, যেখানে ওয়েব এপিআই ভূমিকা পালন করে, এটি ইভেন্ট লুপ থেকে এবং ফাংশনটি সার্ভার তৈরি ইভেন্ট লুপ মুক্ত করে নিয়ে যায় যাতে আমরা সারি থেকে পরবর্তী ফাংশনটি চালাতে পারি। পরবর্তী ফাংশনটি সারিতে ব্যবহার করা হয় () যা লুপে যায় তবে কোন তথ্য পাওয়া যায় না বর্জ্য এবং পরবর্তী ফাংশনের নির্বাহটি সারির শেষ পর্যন্ত চলতে থাকে। (এইটিকে অ্যাসিনক কলিং বলা হয় অর্থাত্ আমরা তথ্য পেতে না পারলে অন্য কিছু করতে পারি)

ধরুন আমাদের serverRequest () ফাংশনটি একটি কোডের একটি বিনিময় বিবৃতি ছিল, যখন আমরা সার্ভার ওয়েব API থেকে ডেটা ফিরে পাব তখন এটি সারির শেষে সারিতে চাপিয়ে দেবে। সারির শেষে এটি ধাক্কা দেওয়া হিসাবে আমরা তার ডেটা ব্যবহার করতে পারছি না কারণ এই তথ্যটি ব্যবহার করতে আমাদের সারিতে কোনও ফাংশন বাকি নেই। সুতরাং Async কল থেকে কিছু ফেরত পাওয়া সম্ভব নয়।

সুতরাং এই সমাধান callback বা প্রতিশ্রুতি ।

এখানে একটি উত্তর থেকে একটি চিত্র, সঠিকভাবে কলব্যাক ব্যবহার ব্যাখ্যা করে ... আমরা কলিং সার্ভার ফাংশন করতে আমাদের ফাংশন (সার্ভার থেকে ফেরত তথ্য ব্যবহার করে ফাংশন) দিতে।

 function doAjax(callbackFunc, method, url) {
  var xmlHttpReq = new XMLHttpRequest();
  xmlHttpReq.open(method, url);
  xmlHttpReq.onreadystatechange = function() {

      if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {
        callbackFunc(xmlHttpReq.responseText);
      }


  }
  xmlHttpReq.send(null);

}

আমার কোড হিসাবে এটি বলা হয়

function loadMyJson(categoryValue){
  if(categoryValue==="veg")
  doAjax(print,"GET","http://localhost:3004/vegetables");
  else if(categoryValue==="fruits")
  doAjax(print,"GET","http://localhost:3004/fruits");
  else 
  console.log("Data not found");
}

অ্যাসাইন কল করার জন্য ECMA (2016/17) এ নতুন পদ্ধতিগুলির জন্য এখানে পড়ুন (@ ফেলিক্স ক্লিং উত্তর উপরে) https://.com/a/14220323/7579856

আপনি যদি আপনার কোডে jQuery ব্যবহার না করেন তবে এই উত্তরটি আপনার জন্য

আপনার কোডটি লাইন বরাবর কিছু হওয়া উচিত:

function foo() {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
    return httpRequest.responseText;
}

var result = foo(); // always ends up being 'undefined'

Felix Kling AJAX এর জন্য jQuery ব্যবহার করে লোকেদের জন্য একটি উত্তর লিখে একটি সূক্ষ্ম কাজ করেছেন, আমি যারা নেই তাদের জন্য বিকল্প প্রদান করার সিদ্ধান্ত নিয়েছি।

( নোট, যারা নতুন fetch API, কৌণিক বা প্রতিশ্রুতি ব্যবহার করে আমি নীচের একটি উত্তর যোগ করেছি )

আপনি সম্মুখীন কি

এটি অন্য উত্তর থেকে "সমস্যার ব্যাখ্যা" এর একটি সংক্ষিপ্ত সারাংশ, যদি আপনি এটি পড়ার পরে নিশ্চিত না হন তবে তা পড়ুন।

এএইচএক্স এ একটি অ্যাসিঙ্ক্রোনাস জন্য দাঁড়িয়েছে। এর মানে হল অনুরোধ পাঠানো (অথবা প্রতিক্রিয়া গ্রহণ করা) স্বাভাবিক মৃত্যুদন্ড প্রবাহের বাইরে নেওয়া হয়। আপনার উদাহরণে, অবিলম্বে ফেরত .send এবং পরবর্তী বিবৃতি, return result; , success কলব্যাক এমনকি আপনি বলা হয় হিসাবে পাস ফাংশন আগে মৃত্যুদন্ড কার্যকর করা হয়।

এর মানে হল আপনি যখন ফিরে আসছেন, আপনি যে শ্রোতাটি সংজ্ঞায়িত করেছেন তা এখনও কার্যকর হয়নি, যার অর্থ আপনি যে মানটি ফিরেছেন তা সংজ্ঞায়িত করা হয়নি।

এখানে একটি সহজ উপমা

function getFive(){ 
    var a;
    setTimeout(function(){
         a=5;
    },10);
    return a;
}

(Fiddle)

a ফেরত মান undefined কারণ a=5 অংশ এখনো নির্বাহ করা হয় নি। AJAX এভাবে কাজ করে, সার্ভারটিকে আপনার ব্রাউজারকে যে মানটি বলে তা জানানোর সুযোগ পাওয়ার আগে আপনি মানটি ফেরত দিচ্ছেন।

এই সমস্যাটির একটি সম্ভাব্য সমাধান পুনরায় সক্রিয়ভাবে কোড করা, আপনার প্রোগ্রামটি গণনা সম্পন্ন করার সময় কী করা উচিত তা বলছে।

function onComplete(a){ // When the code completes, do this
    alert(a);
}

function getFive(whenDone){ 
    var a;
    setTimeout(function(){
         a=5;
         whenDone(a);
    },10);
}

এই CPS বলা হয়। মূলত, আমরা পেয়ে যাচ্ছি, এটি সম্পন্ন করার জন্য একটি পদক্ষেপ কার্যকর করুন, আমরা আমাদের কোডটি বলছি যখন একটি ইভেন্ট সম্পন্ন হওয়ার সময় কীভাবে প্রতিক্রিয়া জানাতে হবে (যেমন আমাদের AJAX কল, অথবা এই ক্ষেত্রে টাইমআউট)।

ব্যবহার হবে:

getFive(onComplete);

যা পর্দায় "5" সতর্কতা অবলম্বন করা উচিত। (Fiddle) ।

সম্ভাব্য সমাধান

মূলত দুটি সমাধান কীভাবে সমাধান করতে হয়:

1. AJAX কল সমলয় করুন (এটি SJAX কল করতে দেয়)।
2. Callbacks সঙ্গে সঠিকভাবে কাজ করার জন্য আপনার কোড পুনর্নির্মাণ।

1. সমলয় AJAX - এটা করবেন না !!

সিঙ্ক্রোনাস AJAX হিসাবে, এটি করবেন না! ফেলিক্সের উত্তরটি কেন একটি খারাপ ধারণা সম্পর্কে কিছু বাধ্যতামূলক আর্গুমেন্ট তুলে ধরে। এটির সমষ্টিগতভাবে, এটি ব্যবহারকারীর ব্রাউজারটি স্থির করবে যতক্ষণ না সার্ভার প্রতিক্রিয়াটি ফেরত দেয় এবং খুব খারাপ ব্যবহারকারীর অভিজ্ঞতা তৈরি করে। এখানে এমডিএন থেকে নেওয়া আরেকটি সংক্ষিপ্ত সারসংক্ষেপ কেন:

XMLHttpRequest উভয় সমলয় এবং অ্যাসিঙ্ক্রোনাস যোগাযোগ সমর্থন করে। সাধারণভাবে, তবে, কর্মক্ষম কারণে সিঙ্ক্রোনাস অনুরোধগুলির জন্য অ্যাসিঙ্ক্রোনাস অনুরোধগুলি অগ্রাধিকার দেওয়া উচিত।

সংক্ষেপে, সিঙ্ক্রোনাস অনুরোধগুলি কোড কার্যকর করা বন্ধ করে দেয় ... ... এর ফলে গুরুতর সমস্যা হতে পারে ...

যদি আপনি এটি করতে চান, আপনি একটি পতাকা পাস করতে পারেন: এখানে কিভাবে:

var request = new XMLHttpRequest();
request.open('GET', 'yourURL', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {// That's HTTP for 'ok'
  console.log(request.responseText);
}

2. কোড পুনঃনির্মাণ

আপনার ফাংশন একটি কলব্যাক গ্রহণ করা যাক। উদাহরণ কোড foo একটি callback গ্রহণ করতে পারেন। আমরা foo সম্পন্ন যখন প্রতিক্রিয়া কিভাবে আমাদের কোড বলা হবে।

তাই:

var result = foo();
// code that depends on `result` goes here

হয়ে:

foo(function(result) {
    // code that depends on `result`
});

এখানে আমরা একটি বেনামী ফাংশনটি পাস করেছি, কিন্তু আমরা সহজেই একটি বিদ্যমান ফাংশনের একটি রেফারেন্স পাস করতে পারছি, এটি এটির মত দেখাচ্ছে:

function myHandler(result) {
    // code that depends on `result`
}
foo(myHandler);

এই ধরণের কলব্যাক ডিজাইন কীভাবে সম্পন্ন হয় সে সম্পর্কে আরো বিস্তারিত জানার জন্য, ফেলিক্সের উত্তর পরীক্ষা করুন।

এখন, এর অনুযায়ী কাজ করতে Foo নিজেই সংজ্ঞায়িত করা যাক

function foo(callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onload = function(){ // when the request is loaded
       callback(httpRequest.responseText);// we're calling our method
    };
    httpRequest.open('GET', "/echo/json");
    httpRequest.send();
}

(fiddle)

আমরা এখন আমাদের foo ফাংশনটি কার্যকর করেছি যখন AJAX সফলভাবে সম্পন্ন হয় তখন চালানোর জন্য একটি পদক্ষেপ গ্রহণ করা হয়, প্রতিক্রিয়া স্থিতিটি 200 না হয় এবং সে অনুযায়ী কাজ করে (ব্যর্থ হ্যান্ডলার এবং এটিকে তৈরি করুন) পরীক্ষা করে আমরা আরও প্রসারিত করতে পারি। কার্যকরীভাবে আমাদের সমস্যা সমাধান।

যদি আপনি এখনও এমডএন এ AJAX শুরু করার নির্দেশিকাটি পড়তে বোঝার সময়টি বুঝতে পারছেন।

2017 উত্তর: আপনি এখন যা করতে চান তা প্রতিটি বর্তমান ব্রাউজার এবং নোডের সাথে ঠিক করতে পারেন

এটি বেশ সহজ:

• একটি প্রতিশ্রুতি ফিরে
• await ব্যবহার করুন , যা জাভাস্ক্রিপ্টকে একটি মানতে সমাধান করার প্রতিশ্রুতির জন্য অপেক্ষা করবে (HTTP প্রতিক্রিয়া মত)
• যোগ async/await পিতা বা মাতা ফাংশন শব্দ

এখানে আপনার কোডের একটি কার্যকর সংস্করণ রয়েছে:

(async function(){

var response = await superagent.get('...')
console.log(response)

})()

অপেক্ষা সমস্ত বর্তমান ব্রাউজার এবং নোড সমর্থিত 8

এখানে অ্যাসিঙ্ক্রোনাস অনুরোধগুলির সাথে কাজ করার কিছু পদ্ধতি রয়েছে:

1. then()
2. Q - জাভাস্ক্রিপ্ট জন্য একটি প্রতিশ্রুতি লাইব্রেরি
3. এ + Promises.js
4. jQuery বিলম্বিত
5. XMLHttpRequest API
6. কলব্যাক ধারণা ব্যবহার করে - প্রথম উত্তর বাস্তবায়ন হিসাবে

উদাহরণ: একাধিক অনুরোধের সাথে কাজ করার জন্য jQuery বিলম্বিত বাস্তবায়ন

var App = App || {};

App = {
    getDataFromServer: function(){

      var self = this,
                 deferred = $.Deferred(),
                 requests = [];

      requests.push($.getJSON('request/ajax/url/1'));
      requests.push($.getJSON('request/ajax/url/2'));

      $.when.apply(jQuery, requests).done(function(xhrResponse) {
        return deferred.resolve(xhrResponse.result);
      });
      return deferred;
    },

    init: function(){

        this.getDataFromServer().done(_.bind(function(resp1, resp2) {

           // Do the operations which you wanted to do when you
           // get a response from Ajax, for example, log response.
        }, this));
    }
};
App.init();

XMLHttpRequest 2 (প্রথম সবই বেঞ্জামিন গ্রুয়েনবাম এবং ফেলিক্স ক্লিংয়ের উত্তরগুলি পড়েছেন)

আপনি যদি jQuery ব্যবহার না করেন এবং একটি দুর্দান্ত ছোট XMLHttpRequest 2 চান যা আধুনিক ব্রাউজারে এবং মোবাইল ব্রাউজারে কাজ করে তবে আমি এটি ব্যবহার করার পরামর্শ দিই:

function ajax(a, b, c){ // URL, callback, just a placeholder
  c = new XMLHttpRequest;
  c.open('GET', a);
  c.onload = b;
  c.send()
}

আপনি দেখতে পারেন:

1. এটি তালিকাভুক্ত অন্যান্য সমস্ত ফাংশন চেয়ে সংক্ষিপ্ত।
2. কলব্যাক সরাসরি সেট করা হয় (তাই অতিরিক্ত অতিরিক্ত অপ্রয়োজনীয় বন্ধ)।
3. এটি নতুন অনলোড ব্যবহার করে (তাই আপনাকে প্রস্তুত স্ট্যাটাস এবং স্থিতির জন্য চেক করতে হবে না)
4. এমন কিছু অন্যান্য পরিস্থিতি রয়েছে যা আমি মনে রাখি না যে XMLHttpRequest 1 বিরক্তিকর করে।

এই Ajax কলটির প্রতিক্রিয়া পেতে দুটি উপায় রয়েছে (তিনটি XMLHttpRequest var নাম ব্যবহার করে):

সহজতম:

this.response

অথবা কিছু কারণে যদি আপনি একটি ক্লাসে কলব্যাকটি বাঁধেন:

e.target.response

উদাহরণ:

function callback(e){
  console.log(this.response);
}
ajax('URL', callback);

অথবা (উপরের একটি ভাল বেনামী ফাংশন সবসময় একটি সমস্যা):

ajax('URL', function(e){console.log(this.response)});

কিছুই সহজ।

এখন কিছু লোক সম্ভবত বলে দেবে যে এটি ইতিমধ্যেই স্ট্যাটাস বিনিময় বা এমনকি XMLHttpRequest পরিবর্তনশীল নাম ব্যবহার করা ভাল। ওইটা ভুল.

XMLHttpRequest উন্নত বৈশিষ্ট্য পরীক্ষা করে দেখুন

এটা সব * আধুনিক ব্রাউজারে সমর্থিত। এবং XMLHttpRequest 2 বিদ্যমান থেকে আমি এই পদ্ধতিটি ব্যবহার করছি হিসাবে আমি নিশ্চিত করতে পারি। আমি ব্যবহার সব ব্রাউজারে কোন ধরনের সমস্যা ছিল না।

onreadystatechange শুধুমাত্র দরকারী যদি আপনি রাষ্ট্র 2 উপর হেডার পেতে চান।

XMLHttpRequest ভেরিয়েবল নামটি ব্যবহার করা আরেকটি বড় ত্রুটি যা আপনাকে এটি লোড না থাকলে ওল্ড / ওরিস্টস্টেচচেন বন্ধের ভিতরে কলব্যাকটি চালানো দরকার।

এখন যদি আপনি পোস্ট এবং ফরমডাটা ব্যবহার করে আরো জটিল কিছু চান তবে আপনি সহজেই এই ফাংশনটি প্রসারিত করতে পারেন:

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val},placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.send(d||null)
}

আবার ... এটি একটি খুব ছোট ফাংশন, কিন্তু এটি পেতে এবং পোস্ট।

ব্যবহারের উদাহরণ:

x(url, callback); // By default it's get so no need to set
x(url, callback, 'post', {'key': 'val'}); // No need to set post data

অথবা একটি সম্পূর্ণ ফর্ম উপাদান ( document.getElementsByTagName('form')[0] পাস করুন document.getElementsByTagName('form')[0] ):

var fd = new FormData(form);
x(url, callback, 'post', fd);

অথবা কিছু কাস্টম মান সেট করুন:

var fd = new FormData();
fd.append('key', 'val')
x(url, callback, 'post', fd);

আপনি দেখতে পারেন যে আমি সিঙ্ক বাস্তবায়ন করিনি ... এটি একটি খারাপ জিনিস।

যে বলেছে ... কেন সহজ উপায় না?

মন্তব্য হিসাবে উল্লিখিত ত্রুটি & সম synchronous ব্যবহার উত্তর সম্পূর্ণ বিন্দু বিরতি করে। সঠিক ভাবে এ্যাজাক্স ব্যবহার করার জন্য একটি চমৎকার সংক্ষিপ্ত উপায় কোনটি?

ত্রুটি হ্যান্ডলার

function x(a, b, e, d, c){ // URL, callback, method, formdata or {key:val}, placeholder
  c = new XMLHttpRequest;
  c.open(e||'get', a);
  c.onload = b;
  c.onerror = error;
  c.send(d||null)
}

function error(e){
  console.log('--Error--', this.type);
  console.log('this: ', this);
  console.log('Event: ', e)
}
function displayAjax(e){
  console.log(e, this);
}
x('WRONGURL', displayAjax);

উপরের স্ক্রিপ্টে, আপনার একটি ত্রুটি হ্যান্ডলার রয়েছে যা স্ট্যাটিক্যালি সংজ্ঞায়িত করা হয়েছে তাই এটি ফাংশনটির সাথে আপোস করে না। ত্রুটি হ্যান্ডলার এছাড়াও অন্যান্য ফাংশন জন্য ব্যবহার করা যেতে পারে।

কিন্তু সত্যিই একটি ত্রুটি খুঁজে বের করতে একমাত্র উপায় একটি ভুল URL লিখতে হয়, যার ক্ষেত্রে প্রতিটি ব্রাউজার একটি ত্রুটি ছুঁড়ে ফেলে।

ত্রুটি হ্যান্ডলারগুলি যদি আপনি কাস্টম হেডার সেট করেন তবে প্রতিক্রিয়া সেট করুন, অ্যারে বাফার বা টাইপ করুন যা কিছু টাইপ করুন।

এমনকি যদি আপনি 'POSTAPAPAP' পদ্ধতি হিসাবে পাস করেন তবে এটি একটি ত্রুটি নিক্ষেপ করবে না।

এমনকি যদি আপনি ফর্মডটা হিসাবে 'fdggdgilfdghfldj' পাস করেন তবে এটি একটি ত্রুটি নিক্ষেপ করবে না।

প্রথম ক্ষেত্রে ত্রুটিটি this.statusText displayAjax() -এর ভিতরে রয়েছে। this.statusText হিসাবে Method not Allowed ।

দ্বিতীয় ক্ষেত্রে, এটি কেবল কাজ করে। সঠিক পোস্ট ডেটা পাস করলে আপনাকে সার্ভারের পাশে চেক করতে হবে।

ক্রস ডোমেইন অনুমোদিত স্বয়ংক্রিয়ভাবে ত্রুটি ছোঁড়ে।

ত্রুটি প্রতিক্রিয়া, কোন ত্রুটি কোড আছে।

শুধুমাত্র এই this.type যা ত্রুটি সেট করা হয়।

যদি ত্রুটিগুলির উপর সম্পূর্ণ নিয়ন্ত্রণ না থাকে তবে কেন একটি ত্রুটি হ্যান্ডলার যুক্ত করবেন? বেশিরভাগ ত্রুটি কলব্যাক ফাংশন displayAjax() মধ্যে এটিকে ফেরত displayAjax() ।

সুতরাং: যদি আপনি সঠিকভাবে URL টি অনুলিপি করতে এবং পেস্ট করতে সক্ষম হন তবে ত্রুটির চেকগুলির কোন প্রয়োজন নেই। ;)

পিএসঃ প্রথম পরীক্ষা হিসাবে আমি এক্স ('এক্স', ডিসপ্লেআজ্যাক্স) লিখেছিলাম ..., এবং এটি সম্পূর্ণ প্রতিক্রিয়া পেয়েছে ... ??? তাই আমি যেখানে এইচটিএমএল অবস্থিত ফোল্ডারে চেক করেছি, এবং 'x.xml' নামে একটি ফাইল ছিল। তাই যদি আপনি XMLHttpRequest 2 ফাইলটি এক্সটেনশানটি ভুলে যান তবে এটি খুঁজে পাবে । আমি lol'd

সমলয় একটি ফাইল পড়ুন

যে না।

আপনি কিছু সময়ের জন্য ব্রাউজারকে ব্লক করতে চাইলে একটি সুন্দর বড় txt ফাইল সমলয় হয়।

function omg(a, c){ // URL
  c = new XMLHttpRequest;
  c.open('GET', a, true);
  c.send();
  return c; // Or c.response
}

এখন আপনি করতে পারেন

 var res = omg('thisIsGonnaBlockThePage.txt');

অ-সমান্তরাল ভাবে এটি করার অন্য কোন উপায় নেই। (হ্যাঁ, সেটটাইম লুপ দিয়ে ... কিন্তু গুরুত্ব সহকারে?)

আরেকটি বিন্দু ... যদি আপনি API গুলির সাথে কাজ করেন বা কেবলমাত্র আপনার তালিকাগুলির ফাইলগুলির মালিক হন বা আপনি যেকোন অনুরোধের জন্য সর্বদা বিভিন্ন ফাংশন ব্যবহার করেন ...

শুধুমাত্র যদি আপনার এমন একটি পৃষ্ঠা থাকে যেখানে আপনি সর্বদা একই এক্সএমএল / JSON লোড করেন বা আপনার যা শুধুমাত্র একটি ফাংশন প্রয়োজন। যে ক্ষেত্রে, একটু অ্যাজাক্স ফাংশন সংশোধন এবং আপনার বিশেষ ফাংশন সঙ্গে খ প্রতিস্থাপন।

উপরে ফাংশন মৌলিক ব্যবহার জন্য হয়।

যদি আপনি ফাংশন প্রসারিত করতে চান ...

হ্যা, তুমি পারো.

আমি অনেকগুলি API ব্যবহার করছি এবং প্রত্যেকটি HTML পৃষ্ঠাতে সংহত হওয়া প্রথম ফাংশনগুলির মধ্যে একটি হল এই উত্তরটিতে প্রথম অ্যাল্যাক্স ফাংশন, শুধুমাত্র GET সহ ...

কিন্তু আপনি XMLHttpRequest 2 এর সাথে প্রচুর পরিমাণে কাজ করতে পারেন:

আমি একটি ডাউনলোড ম্যানেজার (রেজিউম, ফাইলreader, ফাইল সিস্টেমের সাথে উভয় প্রান্তের রেঞ্জ ব্যবহার করে), ক্যানভাস ব্যবহার করে বিভিন্ন ইমেজ রিজাইজার রূপান্তরকারী, base64images সহ websql ডেটাবেসগুলি তৈরি করে এবং আরও অনেক কিছু ... তবে এই ক্ষেত্রে আপনাকে শুধুমাত্র সেই উদ্দেশ্যেই একটি ফাংশন তৈরি করতে হবে ... কখনও কখনও আপনি একটি blob, অ্যারে বাফার প্রয়োজন, আপনি হেডার সেট করতে পারেন, mimetype override এবং আরো অনেক কিছু আছে ...

কিন্তু এখানে প্রশ্ন হল কিভাবে অ্যাজ্যাক্স প্রতিক্রিয়াটি ফেরত দিতে হবে ... (আমি একটি সহজ উপায় যোগ করেছি।)

এর আগে গাছগুলো দেখার আগে প্রথমে বনটি দেখি।

এখানে প্রচুর বিবরণ সহ অনেক তথ্যপূর্ণ উত্তর আছে, আমি তাদের কোনও পুনরাবৃত্তি করব না। জাভাস্ক্রিপ্টে প্রোগ্রামিং করার চাবিকাঠি হচ্ছে সামগ্রিক মৃত্যুদণ্ডের প্রথম মানসিক মডেল ।

1. আপনার এন্ট্রি পয়েন্ট (গুলি) একটি ইভেন্টের ফলাফল হিসাবে মৃত্যুদন্ড কার্যকর করা হয়। উদাহরণস্বরূপ, কোড সহ একটি স্ক্রিপ্ট ট্যাগ ব্রাউজারে লোড করা হয়। (তত্সহ, আপনাকে যদি ডোম উপাদানগুলিকে প্রথমে তৈরি করার প্রয়োজন হয় তবে আপনার কোডটি চালানোর জন্য পৃষ্ঠাটির প্রস্তুতির সাথে সংশ্লিষ্ট হওয়ার প্রয়োজন হতে পারে) ইত্যাদি।
2. আপনার কোডটি সম্পন্ন করার জন্য কার্যকর হয় - তবে অনেকগুলি অ্যাসিঙ্ক্রোনাস কল এটি তৈরি করে - আপনার কোনও কলব্যাকগুলি এক্সিকিউটিভ না করে XHR অনুরোধ, সেট টাইমআউট, ডোম ইভেন্ট হ্যান্ডলার ইত্যাদি অন্তর্ভুক্ত করে। ইত্যাদি কলব্যাকগুলি কার্যকর হওয়ার জন্য অপেক্ষা করা প্রতিটিটি অপেক্ষা করছে, অপেক্ষা করছে তাদের পালা সব শেষ মৃত্যুদন্ড কার্যকর করা হয়েছে যে অন্যান্য ঘটনা পরে চালানো হবে।
3. একটি এক্সএইচআর অনুরোধে প্রতিটি পৃথক কলব্যাক, একবার টাইমআউট বা ডম সেট ইভেন্ট একবার সঞ্চালিত হবে তারপর সম্পন্ন করতে হবে।

ভাল খবর হল যে আপনি এই বিন্দুটি ভালভাবে বুঝতে পারলে, আপনাকে কখনই জাতিগত অবস্থার বিষয়ে চিন্তা করতে হবে না। আপনি কীভাবে আপনার কোডটি সংগঠিত করতে চান তার প্রথম এবং সর্বাপেক্ষা গুরুত্বপূর্ণ বিষয় যা আপনি বিভিন্ন বিচ্ছিন্ন ইভেন্টগুলির প্রতিক্রিয়া হিসাবে এবং কীভাবে আপনি তাদের যৌক্তিক ক্রম অনুসারে থ্রেড করতে চান। আপনি প্রতিশ্রুতি বা উচ্চ স্তরের নতুন async ব্যবহার / শেষ করতে সরঞ্জাম হিসাবে অপেক্ষা করতে পারেন, অথবা আপনি আপনার নিজের রোল করতে পারেন।

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

সংক্ষিপ্ত উত্তর : ফাংশনটি ফেরার পরে কলটি foo()অবিচ্ছিন্নভাবে $ajax()সঞ্চালিত হওয়ার সময় আপনার পদ্ধতি অবিলম্বে ফেরত আসে । সমস্যাটি তখন ফিরে আসার পরে অ্যাসিনসি কল দ্বারা পুনরুদ্ধার হওয়া ফলাফলগুলি কীভাবে বা কোথায় সংরক্ষণ করতে হয়।

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

function foo(result) {
    $.ajax({
        url: '...',
        success: function(response) {
            result.response = response;   // Store the async result
        }
    });
}

var result = { response: null };   // Object to hold the async result
foo(result);                       // Returns before the async completes

মনে রাখবেন যে কলটি foo()এখনও দরকারী কিছু ফেরত দেবে না। যাইহোক, async কল ফলাফল এখন সংরক্ষণ করা হবে result.response।

ES2017 ব্যবহার করে আপনার ফাংশন ঘোষণা হিসাবে এটি থাকা উচিত

async function foo() {
    var response = await $.ajax({url: '...'})
    return response;
}

এবং এই মত নির্বাহ।

(async function() {
    try {
        var result = await foo()
        console.log(result)
    } catch (e) {}
})()

বা প্রতিশ্রুতি সিনট্যাক্স

foo().then(response => {
    console.log(response)

}).catch(error => {
    console.log(error)

})

আপনি একটি রিমোট কল করতে এই কাস্টম লাইব্রেরি (প্রতিশ্রুতি ব্যবহার করে লেখা) ব্যবহার করতে পারেন।

function $http(apiConfig) {
    return new Promise(function (resolve, reject) {
        var client = new XMLHttpRequest();
        client.open(apiConfig.method, apiConfig.url);
        client.send();
        client.onload = function () {
            if (this.status >= 200 && this.status < 300) {
                // Performs the function "resolve" when this.status is equal to 2xx.
                // Your logic here.
                resolve(this.response);
            }
            else {
                // Performs the function "reject" when this.status is different than 2xx.
                reject(this.statusText);
            }
        };
        client.onerror = function () {
            reject(this.statusText);
        };
    });
}

সহজ ব্যবহার উদাহরণ:

$http({
    method: 'get',
    url: 'google.com'
}).then(function(response) {
    console.log(response);
}, function(error) {
    console.log(error)
});

নিম্নলিখিত উদাহরণ আমি লিখেছেন কিভাবে দেখায়

• অ্যাসিঙ্ক্রোনাস HTTP কল হ্যান্ডেল;
• প্রতিটি API কল থেকে প্রতিক্রিয়া জন্য অপেক্ষা করুন;
• Promise প্যাটার্ন ব্যবহার করুন ;
• একাধিক HTTP কল যোগ দিতে Promise.All প্যাটার্ন ব্যবহার করুন;

এই কাজ উদাহরণ স্ব অন্তর্নিহিত। এটি একটি সাধারণ অনুরোধ বস্তু সংজ্ঞায়িত করবে যা XMLHttpRequestকল করতে উইন্ডো অবজেক্ট ব্যবহার করে । এটি প্রতিশ্রুতি একটি গুচ্ছ জন্য সম্পন্ন করার জন্য একটি সহজ ফাংশন সংজ্ঞায়িত করা হবে।

প্রসঙ্গ। উদাহরণটি কোয়েরি স্ট্রিংগুলির একটি নির্দিষ্ট সেটের জন্য বস্তুর সন্ধান করার জন্য স্পটিফি ওয়েব API এপয়েন্ট পয়েন্ট playlistঅনুসন্ধান করছে:

[
 "search?type=playlist&q=%22doom%20metal%22",
 "search?type=playlist&q=Adele"
]

প্রতিটি আইটেমের জন্য, একটি নতুন প্রতিশ্রুতি একটি ব্লকে আগুন দেবে - ExecutionBlockফলাফলটি বিশ্লেষণ করে, ফলাফল অ্যারের উপর ভিত্তি করে প্রতিশ্রুতিগুলির একটি নতুন সেট নির্ধারিত করে, এটি Spotify userবস্তুর তালিকা এবং ExecutionProfileBlockঅ্যাসিঙ্ক্রোনাসেটের মধ্যে নতুন HTTP কলটি চালায় ।

আপনি একটি নেস্টেড প্রতিশ্রুতি কাঠামো দেখতে পারেন যা আপনাকে একাধিক এবং সম্পূর্ণ অ্যাসিঙ্ক্রোনাস নেস্টেড HTTP কলগুলি স্পন করতে দেয় এবং কলগুলির প্রতিটি উপসেট থেকে ফলাফলগুলিতে যোগ দেয় Promise.all।

উল্লেখ্য সাম্প্রতিক স্পটিফ searchAPI গুলি অনুরোধ শিরোনামগুলিতে নির্দিষ্ট করার জন্য অ্যাক্সেস টোকেনের প্রয়োজন হবে:

-H "Authorization: Bearer {your access token}" 

তাই, নিম্নলিখিত শিরোনামটি চালানোর জন্য আপনাকে অনুরোধ শিরোনামগুলিতে আপনার অ্যাক্সেস টোকেনটি রাখতে হবে:

var spotifyAccessToken = "YourSpotifyAccessToken";
var console = {
    log: function(s) {
        document.getElementById("console").innerHTML += s + "<br/>"
    }
}

// Simple XMLHttpRequest
// based on https://davidwalsh.name/xmlhttprequest
SimpleRequest = {
    call: function(what, response) {
        var request;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) { // Internet Explorer
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e) {
                try {
                  request = new ActiveXObject('Microsoft.XMLHTTP');
                } catch (e) {}
            }
        }

        // State changes
        request.onreadystatechange = function() {
            if (request.readyState === 4) { // Done
                if (request.status === 200) { // Complete
                    response(request.responseText)
                }
                else
                    response();
            }
        }
        request.open('GET', what, true);
        request.setRequestHeader("Authorization", "Bearer " + spotifyAccessToken);
        request.send(null);
    }
}

//PromiseAll
var promiseAll = function(items, block, done, fail) {
    var self = this;
    var promises = [],
                   index = 0;
    items.forEach(function(item) {
        promises.push(function(item, i) {
            return new Promise(function(resolve, reject) {
                if (block) {
                    block.apply(this, [item, index, resolve, reject]);
                }
            });
        }(item, ++index))
    });
    Promise.all(promises).then(function AcceptHandler(results) {
        if (done) done(results);
    }, function ErrorHandler(error) {
        if (fail) fail(error);
    });
}; //promiseAll

// LP: deferred execution block
var ExecutionBlock = function(item, index, resolve, reject) {
    var url = "https://api.spotify.com/v1/"
    url += item;
    console.log( url )
    SimpleRequest.call(url, function(result) {
        if (result) {

            var profileUrls = JSON.parse(result).playlists.items.map(function(item, index) {
                return item.owner.href;
            })
            resolve(profileUrls);
        }
        else {
            reject(new Error("call error"));
        }
    })
}

arr = [
    "search?type=playlist&q=%22doom%20metal%22",
    "search?type=playlist&q=Adele"
]

promiseAll(arr, function(item, index, resolve, reject) {
    console.log("Making request [" + index + "]")
    ExecutionBlock(item, index, resolve, reject);
}, function(results) { // Aggregated results

    console.log("All profiles received " + results.length);
    //console.log(JSON.stringify(results[0], null, 2));

    ///// promiseall again

    var ExecutionProfileBlock = function(item, index, resolve, reject) {
        SimpleRequest.call(item, function(result) {
            if (result) {
                var obj = JSON.parse(result);
                resolve({
                    name: obj.display_name,
                    followers: obj.followers.total,
                    url: obj.href
                });
            } //result
        })
    } //ExecutionProfileBlock

    promiseAll(results[0], function(item, index, resolve, reject) {
        //console.log("Making request [" + index + "] " + item)
        ExecutionProfileBlock(item, index, resolve, reject);
    }, function(results) { // aggregated results
        console.log("All response received " + results.length);
        console.log(JSON.stringify(results, null, 2));
    }

    , function(error) { // Error
        console.log(error);
    })

    /////

  },
  function(error) { // Error
      console.log(error);
  });

<div id="console" />

আমি ব্যাপকভাবে here এই সমাধান আলোচনা করেছেন ।

প্রতিশ্রুতি এবং কলব্যাকগুলি বেশিরভাগ ক্ষেত্রেই সূক্ষ্ম কাজ করে, তবে এর মত কিছু প্রকাশ করার পিছনে ব্যথা হয়:

if (!name) {
  name = async1();
}
async2(name);

আপনি মাধ্যমে যেতে শেষ হবে async1; nameঅনির্ধারিত কিনা বা না চেক করুন এবং সেই অনুযায়ী কলব্যাক কল।

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

ছোট ছোট উদাহরণগুলিতে এটি ঠিক আছে তবে এটির ক্ষেত্রে অনেকগুলি সমস্যা রয়েছে এবং ত্রুটিযুক্ত হ্যান্ডলিং জড়িত থাকার সময় এটি বিরক্তিকর হয়ে পড়ে।

Fibers সমস্যা সমাধানে সাহায্য করে।

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

আপনি here প্রকল্প চেকআউট করতে পারেন ।

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

function foo() {
    var result;

    $.ajax({
        url: '...',
        success: function(response) {
            myCallback(response);
        }
    });

    return result;
}

function myCallback(response) {
    // Does something.
}

আপনার কাছে কোড নিক্ষেপ করার পরিবর্তে, ২ টি ধারণা রয়েছে যা JS কীভাবে কলব্যাকগুলি এবং অ্যাসাইন্রোনসিটিটি পরিচালনা করে তা বোঝার চাবিকাঠি। (এমনকি একটি শব্দ আছে?)

ইভেন্ট লুপ এবং Concurrency মডেল

আপনি সচেতন হতে হবে তিনটি জিনিস আছে; সারি; ইভেন্ট লুপ এবং স্ট্যাক

বিস্তৃত, সরল পদে, ইভেন্ট লুপটি প্রকল্প পরিচালকের মতো, এটি ক্রমাগত যে কোনও ফাংশনগুলির জন্য শোনাচ্ছে এবং সারি এবং স্ট্যাকের মধ্যে যোগাযোগ করতে চায়।

while (queue.waitForMessage()) {
   queue.processNextMessage();
}

এটি কিছু চালানোর জন্য একটি বার্তা পায় একবার এটি কিউ যোগ করে। সারি এমন জিনিসগুলির তালিকা যা চালানোর জন্য অপেক্ষা করছে (যেমন আপনার AJAX অনুরোধ)। এটা কল্পনা করুন:

 1. call foo.com/api/bar using foobarFunc
 2. Go perform an infinite loop
 ... and so on

এই বার্তাগুলির মধ্যে যেকোনো একটি চালানোর সময় এটি ক্যুইউ থেকে বার্তা পপ করে এবং একটি স্ট্যাক তৈরি করে, বার্তাটিতে নির্দেশটি সম্পাদন করতে যাকে অবশ্যই JS চালানোর প্রয়োজন হয়। সুতরাং আমাদের উদাহরণে এটি কল বলা হচ্ছেfoobarFunc

function foobarFunc (var) {
  console.log(anotherFunction(var));
}

সুতরাং foobarFunc যে কোনও কাজ চালাতে হবে (আমাদের ক্ষেত্রে anotherFunction) স্ট্যাকের দিকে ধাক্কা দেবে। মৃত্যুদন্ড কার্যকর করা, এবং তারপর ভুলে যাওয়া - ইভেন্ট লুপটি পরবর্তী সারিতে লাইনে চলে যাবে (অথবা বার্তাগুলির জন্য শোনাবে)

এখানে মূল জিনিস মৃত্যুদণ্ড আদেশ। এটাই

যখন কিছু চলতে যাচ্ছে

যখন আপনি একটি বহিরাগত পার্টিতে AJAX ব্যবহার করে একটি কল করুন বা কোন অ্যাসিঙ্ক্রোনাস কোড (উদাহরণস্বরূপ একটি সেট টাইমআউট) চালান, জাভাস্ক্রিপ্ট এটি এগিয়ে যাওয়ার আগে একটি প্রতিক্রিয়া উপর নির্ভর করে।

বড় প্রশ্ন হলো, কখন প্রতিক্রিয়া হবে? উত্তরটি আমরা জানি না - তাই ইভেন্ট লুপটি সেই বার্তাটি "হেই রান রান" বলে অপেক্ষা করছে। যদি JS কেবল সেই বার্তাটির জন্য প্রায়শই অপেক্ষা করে তবে আপনার অ্যাপ্লিকেশনটি নিশ্চিন্ত হয়ে যাবে এবং এটি স্তন্যপান করবে। বার্তাটি লাইনে যোগ করার জন্য অপেক্ষা করার সময় জেএস পরবর্তী লাইনে কিউটি চালানোর কাজ করে।

সেই কারণে অ্যাসিঙ্ক্রোনাস কার্যকারিতা দিয়ে আমরা কলব্যাক্স নামক জিনিসগুলি ব্যবহার করি । এটা বেশ আক্ষরিক একটি then() মত kinda । যেহেতু আমি কিছু সময়ে কিছু ফেরত দেওয়ার প্রতিশ্রুতি দিয়েছি jQuery নির্দিষ্ট কলব্যাকগুলি ব্যবহার করে deffered.done deffered.failএবং deffered.always(অন্যদের মধ্যে) ব্যবহার করে। আপনি here তাদের সব দেখতে পারেনhere

তাই আপনাকে যা করতে হবে তা এমন কোনও ফাংশনটি পাস করে যা পাস করা ডেটা সহ কোনও সময়ে কার্যকর করার প্রতিশ্রুতি দেওয়া হয়।

কারণ একটি কলব্যাক অবিলম্বে কার্যকর করা হয় না তবে পরবর্তী সময়ে এটি কার্যকর হওয়া ফাংশনটির রেফারেন্সটি পাস করা গুরুত্বপূর্ণ। সুতরাং

function foo(bla) {
  console.log(bla)
}

তাই বেশিরভাগ সময় (কিন্তু সর্বদা নয়) আপনি পাস করবেন fooনাfoo()

আশা করি যে কিছু ধারনা করা হবে। যখন আপনি বিভ্রান্তিকর বলে মনে করেন এমন জিনিসগুলির মুখোমুখি হন - আমি অত্যন্ত কমপক্ষে ডকুমেন্টেশনটি পড়ার সুপারিশ করি এটি কমপক্ষে বুঝতে পারে। এটি আপনাকে অনেক ভাল বিকাশকারী বানিয়ে দেবে।

আমরা নিজেদেরকে এমন একটি মহাবিশ্বের মধ্যে খুঁজে পাই যা একটি মাত্রাস্ত্রের সাথে অগ্রগতি হিসাবে আমরা "সময়" বলি। আমরা আসলে কোন সময় বুঝতে পারছি না, কিন্তু আমরা বিমূর্তীকরণ এবং শব্দভান্ডার তৈরি করেছি যা আমাদেরকে যুক্তিযুক্ত করে এবং "অতীত", "বর্তমান", "ভবিষ্যৎ", "আগে", "পরে" এর বিষয়ে কথা বলে।

আমরা তৈরি কম্পিউটার সিস্টেম - আরো এবং আরো - একটি গুরুত্বপূর্ণ মাত্রা হিসাবে সময় আছে। কিছু জিনিস ভবিষ্যতে ঘটতে সেট আপ করা হয়। তারপর অন্যান্য জিনিস অবশেষে ঘটতে পরে অন্যান্য জিনিস ঘটতে হবে। এটি "আসিয়ানচারনিটিটি" নামক মৌলিক ধারণা। আমাদের ক্রমবর্ধমান নেটওয়ার্কযুক্ত বিশ্বের মধ্যে, অ্যাসাইনোকনিসিটিয়ের সবচেয়ে সাধারণ ক্ষেত্রে কিছু দূরবর্তী সিস্টেমের জন্য অনুরোধের জন্য প্রতিক্রিয়া জানাচ্ছে।

একটি উদাহরণ বিবেচনা করুন। আপনি milkman কল এবং কিছু দুধ অর্ডার। যখন এটি আসে, আপনি আপনার কফি এটি রাখতে চান। আপনি এখন আপনার কফি এ দুধ রাখতে পারবেন না, কারণ এটি এখনো এখানে নেই। আপনি আপনার কফি এটি নির্বাণ আগে আসতে জন্য অপেক্ষা করতে হবে। অন্য কথায়, নিম্নলিখিত কাজ করবে না:

var milk = order_milk();
put_in_coffee(milk);

কারণ জেএসের কোন উপায় নেই যে এটি কার্যকর হওয়ার আগে এটি শেষ করার জন্য অপেক্ষাorder_milk করতে হবে put_in_coffee। অন্য কথায়, তা জানে না যে order_milkহয় অ্যাসিঙ্ক্রোনাস এমন কিছু বিষয় যা কিছু ভবিষ্যতে সময় পর্যন্ত দুধ ফলে যাচ্ছে না --is। জেএস, এবং অন্যান্য ঘোষণামূলক ভাষা, অপেক্ষা ছাড়া অন্য একটি বিবৃতি কার্যকর।

ক্লাসিক জেএস এই সমস্যাটির দিকে দৃষ্টি রাখে, যেটি জেএসএসকে প্রথম-শ্রেণীর বস্তুর মতো ফাংশনগুলিকে সমর্থন করে তার সুবিধাটি গ্রহণ করে, এটি একটি ফাংশনকে অ্যাসাইনচোনস অনুরোধের জন্য একটি প্যারামিটার হিসাবে প্রেরণ করে, যা এটি সম্পূর্ণ হওয়ার পরে তা জোগাবে। ভবিষ্যতে কিছু সময় তার কাজ। যে "কলব্যাক" পদ্ধতির। এটা দেখে মনে হচ্ছে:

order_milk(put_in_coffee);

order_milkকিক বন্ধ, দুধ অর্ডার, তারপর, কখন এবং যখন এটি আসে, এটি invokes put_in_coffee।

এই কলব্যাক পদ্ধতির সমস্যাটি হল যে এটি একটি ফাংশনের স্বাভাবিক সেম্যান্টিক্সকে তার ফলাফল সম্পর্কিত রিপোর্টিং দূষিত করে return; পরিবর্তে, ফাংশন একটি পরামিতি হিসাবে দেওয়া একটি কলব্যাক কল করে তাদের ফলাফল রিপোর্ট nost আবশ্যক। এছাড়াও, ঘটনাগুলির দীর্ঘ ক্রমগুলির সাথে আচরণ করার সময় এই পদ্ধতিটি দ্রুত অচল হয়ে উঠতে পারে। উদাহরণস্বরূপ, ধরুন, আমি কফিতে দুধ ঢুকানোর জন্য অপেক্ষা করতে চাই, এবং তারপরে কেবল তৃতীয় ধাপে কাজ করি, যেমন কফি পান। আমি এই মত কিছু লিখতে প্রয়োজন শেষ:

order_milk(function(milk) { put_in_coffee(milk, drink_coffee); }

যেখানে put_in_coffeeদুধ ঢুকানোর জন্য আমি উভয় দুধে যাচ্ছি , এবং drink_coffeeদুধের মধ্যে একবার প্রয়োগ করার পরেও এটি কার্যকর করার ( ) কাজ করা। এই কোডটি লিখতে, পড়তে এবং ডিবাগ করা কঠিন হয়ে পড়ে।

এই ক্ষেত্রে, আমরা এই প্রশ্ন কোডটি পুনরায় লিখতে পারি:

var answer;
$.ajax('/foo.json') . done(function(response) {
  callback(response.data);
});

function callback(data) {
  console.log(data);
}

প্রতিশ্রুতি লিখুন

এই "প্রতিশ্রুতি", যা মান একটি বিশেষ ধরনের যা প্রতিনিধিত্ব করে এর ধারণা জন্য প্রেরণা ছিল ভবিষ্যৎ বা অ্যাসিঙ্ক্রোনাস কিছু বাছাই ফলাফল। এটি এমন কিছু প্রতিনিধিত্ব করতে পারে যা ইতিমধ্যে ঘটেছে, অথবা এটি ভবিষ্যতে ঘটতে যাচ্ছে, নাকি এটি কখনোই ঘটতে পারে না। প্রতিশ্রুতিগুলির একটি একক পদ্ধতি আছে, যার নাম thenআপনি প্রতিশ্রুতিটি কার্যকর করার প্রতিশ্রুতি দিয়েছেন যখন প্রতিশ্রুতি উপস্থাপিত হয়েছে।

আমাদের দুধ এবং কফি ক্ষেত্রে, আমরা order_milkদুধ আসার জন্য একটি প্রতিশ্রুতি ফিরিয়ে আনার জন্য ডিজাইন করি , তারপরে নিম্নোক্ত পদক্ষেপ put_in_coffeeহিসাবে নির্দিষ্ট করুন then:

order_milk() . then(put_in_coffee)

এর একটি সুবিধা হলো আমরা ভবিষ্যতের ঘটনার ক্রমগুলি তৈরি করতে এই একসাথে স্ট্রিং করতে পারি ("ক্রেনিং"):

order_milk() . then(put_in_coffee) . then(drink_coffee)

আসুন আপনার বিশেষ সমস্যা প্রতিশ্রুতি প্রয়োগ করুন। আমরা একটি ফাংশন ভিতরে আমাদের অনুরোধ যুক্তি মোড়ানো হবে, যা একটি প্রতিশ্রুতি ফিরে:

function get_data() {
  return $.ajax('/foo.json');
}

প্রকৃতপক্ষে, আমরা যা করেছি তা returnকলটিতে যোগ করা হয়েছে $.ajax। এই কাজ করে কারণ jQuery $.ajaxইতিমধ্যে একটি ধরনের প্রতিশ্রুতি মত জিনিস ফেরত। (অনুশীলনে, বিস্তারিত জানার পরে, আমরা এই কলটি মোড়ানো পছন্দ করি যাতে একটি সত্য প্রতিশ্রুতি ফিরিয়ে আনা যায় অথবা এর জন্য কিছু বিকল্প ব্যবহার করা $.ajaxহয়।) এখন, যদি আমরা ফাইলটি লোড করতে এবং এটি শেষ করতে এবং তারপরে অপেক্ষা করতে চাই কিছু না, আমরা কেবল বলতে পারেন

get_data() . then(do_something)

এই ক্ষেত্রে,

get_data() . 
  then(function(data) { console.log(data); });

প্রতিশ্রুতি ব্যবহার করার সময়, আমরা অনেকগুলি ফাংশন পাস করতে শেষ করি then, তাই এটি প্রায়শই কম কম্প্যাক্ট ES6- শৈলী তীর ফাংশনগুলি ব্যবহার করতে সহায়ক হয়:

get_data() . 
  then(data => console.log(data));

asyncশব্দ

কিন্তু যদি কোড সমেত সমান্তরাল এবং অ্যাসিঙ্ক্রোনাস হয় তবে একেবারে ভিন্ন ভাবে কোড লেখার বিষয়ে অস্পষ্টভাবে অসন্তুষ্ট কিছু আছে। সমান্তরাল জন্য, আমরা লিখুন

a();
b();

কিন্তু যদি aঅ্যাসিনক্রোনাস হয়, প্রতিশ্রুতি সঙ্গে আমরা লিখতে হবে

a() . then(b);

উপরে, আমরা বলেছি "জেএসের কোন উপায় নেই যে এটি দ্বিতীয় কলটি কার্যকর করার আগে এটি শেষ হওয়ার জন্য অপেক্ষা করতে হবে "। এটা কি চমৎকার হবে না যদি জেএস বলার কিছু উপায় ছিল ? এটি দেখা যাচ্ছে যে - awaitকীওয়ার্ড, একটি বিশেষ ধরণের ফাংশনের ভিতরে ব্যবহৃত হয় যা "async" ফাংশন নামে পরিচিত। এই বৈশিষ্ট্যটি ES এর আসন্ন সংস্করণের অংশ, কিন্তু ইতিমধ্যেই বাথেলের মতো সঠিক ট্রান্সলেলারগুলিতে উপলব্ধ রয়েছে। এই সহজভাবে লিখতে পারবেন

async function morning_routine() {
  var milk   = await order_milk();
  var coffee = await put_in_coffee(milk);
  await drink(coffee);
}

আপনার ক্ষেত্রে, আপনি কিছু লিখতে সক্ষম হবে

async function foo() {
  data = await get_data();
  console.log(data);
}

আমি একটি ভয়ঙ্কর খুঁজছেন, হাত আঁকা কমিক সঙ্গে উত্তর দিতে হবে। দ্বিতীয় ছবিটি কারণ কেন আছে resultহয় undefinedআপনার কোড উদাহরণে।

এখানে বেশিরভাগ উত্তরগুলি আপনার একক অ্যাসাইন অপারেশন করার জন্য দরকারী পরামর্শ দেয় তবে কখনও কখনও, এটি যখন আসে তখন আপনাকে অ্যারে বা অন্যান্য তালিকা-ভিত্তিক কাঠামোর প্রতিটি এন্ট্রির জন্য একটি অ্যাসিঙ্ক্রোনাস অপারেশন করতে হবে । প্রলোভন এই কাজ করতে হয়:

// WRONG
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log(results); // E.g., using them, returning them, etc.

উদাহরণ:

// WRONG
var theArray = [1, 2, 3];
var results = [];
theArray.forEach(function(entry) {
    doSomethingAsync(entry, function(result) {
        results.push(result);
    });
});
console.log("Results:", results); // E.g., using them, returning them, etc.

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

যে কাজটি কাজ করে না সেটি হলো যে doSomethingAsyncআপনি যে ফলাফলগুলি ব্যবহার করার চেষ্টা করছেন তা থেকে কলব্যাকগুলি এখনও পর্যন্ত চলবে না।

সুতরাং, যদি আপনার একটি অ্যারের (অথবা কোনও ধরণের তালিকা) থাকে এবং প্রতিটি এন্ট্রির জন্য অ্যাসিনসি ক্রিয়াকলাপগুলি করতে চান তবে আপনার দুটি বিকল্প রয়েছে: সমান্তরাল (ওভারল্যাপিং) ক্রিয়াকলাপগুলি বা সিরিজের (ক্রম অনুসারে অন্যের মধ্যে) ক্রিয়াকলাপ করুন।

সমান্তরাল

আপনি তাদের সবগুলি শুরু করতে পারেন এবং আপনি কতগুলি কলব্যাক আশা করছেন তার ট্র্যাক রাখুন এবং তারপরে আপনি যখন অনেক কলব্যাক পেয়েছেন তখন ফলাফলগুলি ব্যবহার করুন:

var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

উদাহরণ:

var theArray = [1, 2, 3];
var results = [];
var expecting = theArray.length;
theArray.forEach(function(entry, index) {
    doSomethingAsync(entry, function(result) {
        results[index] = result;
        if (--expecting === 0) {
            // Done!
            console.log("Results:", results); // E.g., using the results
        }
    });
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(আমরা দূরে expectingএবং শুধুমাত্র ব্যবহার করতে পারে results.length === theArray.length, কিন্তু যে theArrayকল অসামান্য যখন পরিবর্তিত হয় যে আমাদের খোলা পাতা ...)

লক্ষ্য করুন কিভাবে আমরা ব্যবহার indexথেকে forEachফলাফল সংরক্ষণ করতে resultsএন্ট্রি এটা সম্পর্কিত হিসাবে একই অবস্থানে, এমনকি যদি ফলাফল আদেশের বাইরে পৌঁছা (যেহেতু ASYNC কল অবশ্যই ক্রম অনুসারে শেষ না করেন তারা শুরু হয়েছে, যা)।

কিন্তু যদি আপনি একটি ফাংশন থেকে যারা ফলাফল ফিরে প্রয়োজন ? অন্যান্য উত্তর হিসাবে নির্দিষ্ট করা হয়েছে, আপনি করতে পারেন না; আপনাকে আপনার ফাংশন গ্রহণ করতে হবে এবং একটি কলব্যাক কল করতে হবে (বা একটি then() ফেরত then() )। এখানে একটি কলব্যাক সংস্করণ:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

উদাহরণ:

function doSomethingWith(theArray, callback) {
    var results = [];
    var expecting = theArray.length;
    theArray.forEach(function(entry, index) {
        doSomethingAsync(entry, function(result) {
            results[index] = result;
            if (--expecting === 0) {
                // Done!
                callback(results);
            }
        });
    });
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

অথবা এখানে Promiseপরিবর্তিত একটি সংস্করণ :

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

অবশ্যই, যদি doSomethingAsyncআমাদের ত্রুটিগুলি পাস করে, আমরা rejectযখন একটি ত্রুটি পেয়েছিলাম তখন প্রতিশ্রুতি প্রত্যাখ্যান করার জন্য ব্যবহার করব ।)

উদাহরণ:

function doSomethingWith(theArray) {
    return new Promise(function(resolve) {
        var results = [];
        var expecting = theArray.length;
        theArray.forEach(function(entry, index) {
            doSomethingAsync(entry, function(result) {
                results[index] = result;
                if (--expecting === 0) {
                    // Done!
                    resolve(results);
                }
            });
        });
    });
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(অথবা বিকল্পভাবে, আপনি doSomethingAsyncএকটি প্রতিশ্রুতি যে একটি প্রতিশ্রুতি ফেরত দিতে পারে , এবং তারপর নিচের কাজ করতে পারে ...)

যদি doSomethingAsyncআপনি একটি then() দেয় , আপনি ব্যবহার করতে পারেন Promise.all:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry, function(result) {
            results.push(result);
        });
    }));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

উদাহরণ:

function doSomethingWith(theArray) {
    return Promise.all(theArray.map(function(entry) {
        return doSomethingAsync(entry, function(result) {
            results.push(result);
        });
    }));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

উল্লেখ্য যে, Promise.allআপনি যখন প্রতিশ্রুতিবদ্ধ হয়েছেন তখন আপনি যে সকল প্রতিশ্রুতিগুলি দিয়েছেন তার ফলাফলগুলির অ্যারের সাথে তার প্রতিশ্রুতিটি সমাধান করে বা প্রতিশ্রুতিটির প্রথমটি যখন আপনি প্রত্যাখ্যান করেন তখন তার প্রতিশ্রুতি প্রত্যাখ্যান করে।

ক্রম

ধরুন অপারেশন সমান্তরাল হতে চান না? আপনি যদি একে অপরের পর একটিকে চালাতে চান তবে আপনাকে পরবর্তী শুরু করার আগে প্রতিটি অপারেশনটি সম্পূর্ণ করতে হবে। এখানে এমন একটি ফাংশনের একটি উদাহরণ যা এটি করে এবং ফলাফল সহ একটি কলব্যাক কল করে:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith(theArray, function(results) {
    console.log("Results:", results);
});

(যেহেতু আমরা সিরিয়ায় কাজ করছি, আমরা তখনই ব্যবহার করতে পারি results.push(result)যেহেতু আমরা জানি যে আমরা ফলাফলের ফলাফল খুঁজে পাব না। উপরের দিকে আমরা ব্যবহার করতে পারতাম results[index] = result;, কিন্তু নিম্নলিখিত কয়েকটি উদাহরণের মধ্যে আমাদের সূচী নেই ব্যবহার করা.)

উদাহরণ:

function doSomethingWith(theArray, callback) {
    var results = [];
    doOne(0);
    function doOne(index) {
        if (index < theArray.length) {
            doSomethingAsync(theArray[index], function(result) {
                results.push(result);
                doOne(index + 1);
            });
        } else {
            // Done!
            callback(results);
        }
    }
}
doSomethingWith([1, 2, 3], function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value, callback) {
    console.log("Starting async operation for " + value);
    setTimeout(function() {
        console.log("Completing async operation for " + value);
        callback(value * 2);
    }, Math.floor(Math.random() * 200));
}

.as-console-wrapper {
  max-height: 100% !important;
}

(অথবা, আবার, একটি wrapper নির্মাণ doSomethingAsyncযে জন্য আপনি একটি প্রতিশ্রুতি দেয় এবং নিচের কাজ ...)

যদি doSomethingAsyncআপনি একটি প্রতিশ্রুতি দেয়, যদি আপনি (যেমন একটি transpiler সঙ্গে সম্ভবত ES2017 + + সিনট্যাক্স ব্যবহার করতে পারেন হট্টগোল ), আপনি একটি ব্যবহার করতে পারেন async/await সঙ্গে for-ofএবং await:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

উদাহরণ:

async function doSomethingWith(theArray) {
    const results = [];
    for (const entry of theArray) {
        results.push(await doSomethingAsync(entry));
    }
    return results;
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

আপনি যদি ES2017+ সিনট্যাক্স (এখনও পর্যন্ত) ব্যবহার করতে না পারেন তবে আপনি "প্রতিশ্রুতি হ্রাস" প্যাটার্নের উপর একটি বৈচিত্র ব্যবহার করতে পারেন (এটি স্বাভাবিক প্রতিশ্রুতি কমিয়ে তুলনায় আরও জটিল কারণ আমরা ফলাফলটি এক থেকে পরবর্তীতে অতিক্রম করছি না, বরং এর পরিবর্তে একটি অ্যারে তাদের ফলাফল একত্রিত করা):

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith(theArray).then(function(results) {
    console.log("Results:", results);
});

উদাহরণ:

function doSomethingWith(theArray) {
    return theArray.reduce(function(p, entry) {
        return p.then(function(results) {
            return doSomethingAsync(entry).then(function(result) {
                results.push(result);
                return results;
            });
        });
    }, Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

... ES2015 + তীর ফাংশনগুলির সাথে কম কষ্টকর :

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith(theArray).then(results => {
    console.log("Results:", results);
});

উদাহরণ:

function doSomethingWith(theArray) {
    return theArray.reduce((p, entry) => p.then(results => doSomethingAsync(entry).then(result => {
        results.push(result);
        return results;
    })), Promise.resolve([]));
}
doSomethingWith([1, 2, 3]).then(function(results) {
    console.log("Results:", results);
});

function doSomethingAsync(value) {
    console.log("Starting async operation for " + value);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log("Completing async operation for " + value);
            resolve(value * 2);
        }, Math.floor(Math.random() * 200));
    });
}

.as-console-wrapper {
  max-height: 100% !important;
}

এটি এমন একটি জায়গা যা দুটি নতুন ডেটাবেসিংয়ের জন্য দুটি নতুন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক আপনার জন্য ব্যাপকভাবে কাজ করবে।

সুতরাং যদি আপনি Angular, React বা অন্য ফ্রেমওয়ার্কগুলি ব্যবহার করেন যা দুটি উপায়ে ডেটা বাইন্ডিং করে থাকে তবে এই সমস্যাটি কেবল আপনার জন্য ঠিক করা হয়েছে, তাই সহজ ভাষায়, আপনার ফলাফলটি undefinedপ্রথম পর্যায়ে রয়েছে, তাই আপনি result = undefinedতথ্যটি পাওয়ার আগে আপনি পেয়েছেন , যত তাড়াতাড়ি আপনি ফলাফল পাবেন, এটি আপডেট হবে এবং আপনার অজ্যাক্স কলটির প্রতিক্রিয়া যা নতুন মান নির্ধারণ করা হবে ...

কিন্তু আপনি কীভাবে এটিকে বিশুদ্ধ জাভাস্ক্রিপ্ট বা jQuery এ করতে পারেন যেমন আপনি এই প্রশ্নে জিজ্ঞাসা করেছেন?

আপনি একটি কলব্যাক , প্রতিশ্রুতি এবং সম্প্রতি আপনার জন্য এটি পরিচালনা করার জন্য পর্যবেক্ষণযোগ্য ব্যবহার করতে পারেন , উদাহরণস্বরূপ প্রতিশ্রুতিগুলিতে আমাদের সাফল্য () বা তারপরে কিছু ফাংশন রয়েছে যা আপনার ডেটা যখন আপনার জন্য প্রস্তুত হয় তখন একই সাথে কলব্যাক বা সাবস্ক্রাইব ফাংশনের সাথে উপর পর্যবেক্ষণযোগ্য ।

উদাহরণস্বরূপ, আপনার ক্ষেত্রে যা আপনি jQuery ব্যবহার করছেন , আপনি এটির মতো কিছু করতে পারেন:

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});

প্রতিশ্রুতি এবং পর্যবেক্ষক সম্পর্কে আরো তথ্যের জন্য এই অ্যাসাইন স্টাফ করার নতুন উপায় যা।

সংক্ষিপ্ত উত্তর হল, আপনি এই মত একটি callback বাস্তবায়ন করতে হবে:

function callback(response) {
    // Here you can do what ever you want with the response object.
    console.log(response);
}

$.ajax({
    url: "...",
    success: callback
});

সর্বাধিক সমাধানটি একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করে এবং এটি অজ্যাক্স successকলব্যাকের জন্য কল করে ।

function callServerAsync(){
    $.ajax({
        url: '...',
        success: function(response) {

            successCallback(response);
        }
    });
}

function successCallback(responseObj){
    // Do something like read the response and show data
    alert(JSON.stringify(responseObj)); // Only applicable to JSON response
}

function foo(callback) {

    $.ajax({
        url: '...',
        success: function(response) {
           return callback(null, response);
        }
    });
}

var result = foo(function(err, result){
          if (!err)
           console.log(result);    
});