JavaScript的异步编程

目录

目标

实战

回调函数 (Callback)

Promise

---

目标

        了解异步编程实现方式。

---

实战

回调函数 (Callback)

        当某个任务完成后，调用回调函数来处理结果。它通常会导致回调地狱，即嵌套多个回调函数，官方不推荐使用。

function fetchData(callback) {
    setTimeout(function() {
        callback(3,4);
    }, 1000);
}

fetchData(function(x,y) {
    //1秒后输出12
    console.log(x*y)
});

---

Promise

        官方推荐用Promise代替Callback，其中：resolve()：表示操作成功，返回值。reject()：表示操作失败，返回错误。

传递一个参数

var myPromise = new Promise(function(resolve, reject) {
    //throw new Error("程序错误。");
    var success = true;
    if (success) {
        resolve("你好。");
    } else {
        reject("执行错误。");
    }
});

myPromise.then(function(x) {
    console.log(x); 
}).catch(function(error) {
    console.log("报错了"); // 如果失败，会打印出错误信息
    console.log(error);
});

用async/await方式调用

function fetchData() {
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            resolve("你好。");
        }, 2000);
    });
}
//方法一
async function getData() {
    console.log("开始获取数据...");
    let result = await fetchData(); // 等待 fetchData 执行完毕
    console.log(result); //输出：你好
}

getData();

//方法二
fetchData().then(function(result) {
    console.log(result); // 2 秒后输出："你好。"
});

传递多个参数

        可以用对象或者数组作为参数。

var myPromise = new Promise(function(resolve, reject) {
    var success = true;
    if (success) {
        resolve({ x: 3, y: 5 }); // 传递一个对象
    } else {
        reject("执行错误。");
    }
});

myPromise.then(function(result) {
    console.log(result.x * result.y); // 输出 15
}).catch(function(error) {
    console.log(error);
});