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

原文地址：https://www.cnblogs.com/Grani/p/9588221.html

平常在封装一个同步的函数时，我们只需要在函数中 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)