js Encapsulate a simple asynchronous API, Get the result of asynchronous operation

Usually when encapsulating a synchronous function , We just need to be in the function return The result is OK .
like this ：

function fn () {
    
 var data = 'hello';
 return data;
}
var data = fn();
console.log(data) // Output  ： hello

js Asynchronous operations in ：
* Timer
* Event binding
* ajax Asynchronous mode
* Callback function

How to get the result of asynchronous operation in a function , For example, call a function fn() Get internal variables data Value ：
（1）

function fn() {
    
　　setTimeout(function () {
    
    　　var data = 'Hi'
   },1000)
　　console.log(data)
}
fn()

Because of the timer 1 Seconds later , But the code has already been executed console, So the output is data is not defined

（2）

function fn() {
    
    setTimeout(function () {
    
        var data = 'Hi'
        return data
    },1000)
}
console.log(fn())

fn Function has no return value , So the output is undefined
return It's the one in the timer function Conduct return Of , And fn irrelevant

（3）

var data = '^_^'
function fn() {
    
    setTimeout(function () {
    
        data = 'Hi'
    },1000)
    return data
}
console.log(fn())

The timer is asynchronous , So the code doesn't wait , Will be executed directly to return, Assignment operation is not performed , So the result is _

The right way

If you need to get the result of an asynchronous operation in a function , It must be obtained through the callback function

function fn(callback) {
    
    // Pass in a function , It is equivalent to creating a new one called callback Function of 
    //var callback = function (data) { console.log(data) }
    setTimeout(function () {
    
        var data = 'Hi'
        callback(data)
    },1000)
}
fn(function (data) {
    
    console.log(data)
})

The key step is to call callback , The reason why the data cannot be obtained in the previous situation is because ,data Variables are defined in the timer , Function unequal timer function The execution immediately wants to get the data , That is, you come to pick up the goods before others' products are ready , This shows that you can't

Now? callback At the end of the timer function Internal execution , And in data Execute after variable initialization , You can guarantee to get the data , Even if the timer is 10 Seconds or even a minute doesn't matter , Wait anyway data Execute after initialization callback
in other words , When it is really implemented setTimeout The function inside , If called callback function , Then you can call to execute fn Callback function for callback, So as to achieve the purpose of transmitting asynchronous results

There is another way to get data Value , Is to define it as a global variable , The timer will execute in one second , Then call it in two seconds , But this way is not interesting

var data
function fn() {
    
    setTimeout(function () {
    
        data = 'Hi'
    },1000)
}
fn()

setTimeout(function () {
    
    console.log(data)  // Two seconds later, the result is Hi, If the 2000 Change it to 0, The result is undefined
},2000)

console.log('______start__________');


var data  = '^_^'
function fn(callback){
    

	setTimeout(() => {
    
	    var data = 1+2
	    callback(data)
	},1000);

}

function callback(data){
    
   // Get the asynchronous array and operate here 
    console.log(data);
}



fn(callback)

console.log('______end__________');

console.log(' end ');