ES6的异步操作

异步操作

[TOC]


Promise

let p = new Promise(function (resolve,reject) 
{
    $.ajax
    ({
        url:"arr.txt",
        success(arr){
            resolve(arr)
        },
        error(res){
            reject(res);
        }
    })
});
//第一个函数是resolve,第二个函数是reject
p.then(function (arr)
{
    alert("成功");
    console.log(arr);
},function (res) {
    alert("失败");
    console.log(res);
})

实际上jquery$.ajax返回的也是一个Promise

$.ajax({
    url: 'arr.txt',
    dataType: 'json',
}).then(arr=>{
    alert(arr);
},res=>alert(res))

批量读取:

Promise.all([
    $.ajax({url: 'arr.txt',dataType: 'json'}),
    $.ajax({url: 'arr2.txt',dataType: 'json'}),
    $.ajax({url: 'json.json',dataType: 'json'}),
]).then(arr=>{
    console.log(...arr[0]);
    console.log(...arr[1]);
    console.log(arr[2].name,arr[2].age,arr[2].sex);
}, res=>{
    alert("失败");
})
//输出
5 56 89 13 6 56
21 1 457 99 89
22 maid 20 男

async/awite

使用同步写法执行异步操作

async能让函数暂停
await在该语句后面等待

async function show() {
    let a = 5;
    let b = 6;
    let data = await $.ajax({url:'arr.txt',dataType:'json'});
    alert(a+b+data[0]);  //16
}
show();

这种语法想要报错就使用try catch

实际上:

function show() {
    let a = 5;
    let b = 6;
    let data = $.ajax({url:'arr.txt',dataType:'json'}).then(arr=>{alert(a+b+arr[0])});//16
}
show();
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容