js 封装一个简单的异步API，获取异步操作结果和过程解析

Posted 2022-07-18 勇敢*牛牛

js 封装一个简单的异步API，获取异步操作结果

平常在封装一个同步的函数时，我们只需要在函数中 return 结果就可以了。
像这样：

function fn () 
 var data = 'hello';
 return data;

var data = fn();
console.log(data) //输出 ： hello

js 中的异步操作：
❶ 定时器
❷ 事件绑定
❸ ajax异步模式
❹ 回调函数

如何获取一个函数中异步操作的结果，例如调用函数 fn() 得到内部变量 data 的值：
（1）

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

fn()

由于定时器 1 秒后才执行，但代码早已执行到了 console，所以输出结果为 data is not defined

（2）

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

console.log(fn())

fn 函数没有返回值，所以输出结果为 undefined
return 是定时器里的那个 function 进行 return 的，与 fn 无关

（3）

var data = '^_^'
function fn() 
    setTimeout(function () 
        data = 'Hi'
    ,1000)
    return data

console.log(fn())

定时器是异步的，所以代码不等待，会直接执行到 return，赋值操作没有执行，所以结果为 _

正确方式

如果需要获取一个函数中异步操作的结果，则必须通过回调函数来获取

function fn(callback) 
    //传入一个函数,就相当于在这创建了一个叫callback的函数
    //var callback = function (data)  console.log(data) 
    setTimeout(function () 
        var data = 'Hi'
        callback(data)
    ,1000)

fn(function (data) 
    console.log(data)
)

关键的一步是在定时器内调用 callback ，前面的情况之所以拿不到数据是因为，data 变量在定时器内定义，函数不等定时器里的 function 执行就立马想拿到数据，就是人家产品都没做好你就来提货，这显示是不行的

现在 callback 在定时器的 function 里执行，并且是在 data 变量初始化后才执行，就保证能拿到数据，即便定时器是10秒甚至一分钟都没关系，反正都是等 data 初始化后才执行 callback
也就是说，当真正执行了setTimeout里面的函数时，如果调用了callback函数，那么就可以调用执行fn的回调函数callback，从而达成传递异步结果的目的

还有种方式可以获取 data 的值，就是将其定义为全局变量，定时器一秒后执行，那就两秒后进行调用，但此方式没有意思

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

fn()

setTimeout(function () 
    console.log(data)  //两秒后结果为Hi，若将2000改为0，结果为undefined
,2000)

console.log('______start__________');


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

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



function callback(data)
   //拿到异步的数组就在这里操作
    console.log(data);




fn(callback)

console.log('______end__________');

console.log('结束');