Promise异步操作

版权声明：本文为博主原创文章，转载请注明出处 thx~ https://blog.csdn.net/x550392236/article/details/88643462

从一诞生，JavaScript就是单线程，所有代码都是单线程执行的，这已经成了这门语言的核心特征，将来也不会改变。

由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。

let p = new Promise(function (resolve, reject) {
    // resolve 解决 => 成功回调
    // reject  拒绝 => 失败回调
    $.ajax({
        url: 'data/test1.json',
        dataType: 'json',
        success(data) {
            resolve(data);
        },
        error(res) {
            reject(res);
        }
    })
})

p.then(
    function (data) {
        console.log('成功回调');
    },
    function (res) {
        console.log('失败回调');
    }
)

// ajax的返回结果本身也是个promise对象
$.ajax({
    url: 'data/test1.json',
    dataType: 'json'
}).then(data => {
    console.log('成功回调:' + data);
}, res => {
    console.log('失败回调:' + res);
})

---

Promise.all([
    $.ajax({ url: 'data/test1.json', dataType: 'json' }),
    $.ajax({ url: 'data/test2.json', dataType: 'json' }),
    $.ajax({ url: 'data/test3.json', dataType: 'json' })
]).then(data => {
    console.log('成功回调:' + data); // 所有的都成功才执行成功回调
    // 返回的data是个数组
    let [data1, data2, data3] = data // 解构赋值
    console.log(data1);
    console.log(data2);
    console.log(data3);
}, res => {
    console.log('失败回调:' + res); // 只要有一个失败就执行失败回调
});

---

async 异步 await 同步 语法糖

// 一个异步方法
async function name1() {
    let a = 12;
    let b = 5;
    // 一个同步的ajax请求
    let data = await $.ajax({ url: 'data/test.json', dataType: 'json' });
    console.log(a + b + data[0]);
}
name1();

// name1的本质操作相当于
function name2() {
    let a = 12;
    let b = 5;
    $.ajax({ url: 'data/test.json', dataType: 'json' }).then(data => {
        console.log(a + b + data[0]);
    }, res => {
        console.log('失败回调:' + res);
    });
}
name2();