Promise,封装ajax，并行串行请求/ async,await

Promise是什么？

promise对象是一个构造函数。

接收一个函数作为参数，此函数的两个参数分别是resolve,reject。

resolve 的作用Promise对象的状态从未完成到成功，成功后，将异步操作的结果作为参数传递。

reject 的作用Promise对象的状态从未完成到失败，失败后，将异步操作的结果作为参数传递。

then()方法分别指定resolve,reject的回调函数。

catch() 方法返回一个Promise，并且处理拒绝的情况。它的行为与调用Promise.prototype.then(undefined, onRejected)相同。

推荐使用catch方法，不要在then方法中定义rejected状态的回调函数；这是因为使用catch还可以捕获在then方法执行中存在的错误。

var p = new Promise(function(resolve,reject){
    if(true){
        resolve('ok')
    } else {
        reject('error')
    }
})
p.then(function(v){
    console.log(v) // ok
},fuction(v){
    console.log(v) // error
})
复制代码

并行写法

all

let p1 = new Promise(function(resolve,reject){
    setTimeout(() => {
        resolve('ok')
    },500)
})
let p2 = new Promise(function(resolve,reject){
    setTimeout(() => {
        resolve('error')
    },1000)
})

Promise.all([p1,p2]).then(([v1,v2]) => {
    console.log(v1)
    console.log(v2)
},(err) => {
    console.log(err)
})
复制代码

race 返回结果快的，谁返回的快返回谁。 不管成功还是失败

Promise封装ajax

const getJson = function (url, type, data) {
    const promise = new Promise(function (resolve, reject) {
        const handler = function () {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status == 200) {
                resolve(this.response)
            } else {
                reject(new Error(this.statusText))
            }
        }
        const client = new XMLHttpRequest();
        client.open(type, url);
        client.onreadystatechange = handler;
        client.responseType = 'json';
        if (type == 'get') {
            client.send(data);
        } else {
            client.setRequestHeader("Content-Type", "application/json");
            client.send(JSON.stringify(data));
        }
    });
}
复制代码

jquery（ajax） 中使用then写法 ,jq版本大于1.5

    $({url: '/get/data',type:'get',dataType:'json'}).then(res => {
        console.log(res)
    },(err) => {
        console.log(err)
    })
复制代码

    $({url: '/get/data',type:'get',dataType:'json'}).done(res => { //then 方法有返回值，会传递到下一个链式中 done不会有返回值返回到下一个链式中
        console.log(res)
    })fail((err) => {
        console.log(err)
    })
复制代码

jq 并行 使用when方法

$.when($({url: '/get/data',type:'get',dataType:'json'}),$({url: '/get/data1',type:'get',dataType:'json'})).then((v1,v2) => {
    console.log(v1)
    console.log(v2)
},(err) => {
    console.log(err)
})
复制代码

async

// async 表示异步  作为一个关键字放在函数前面，表示函数是一个异步的函数
async function test (){ // async函数默认返回一个Promise实例，默认是成功的状态，把函数的返回值传给then的第一个参数
    return 'hello world'
}
test();
console.log('123456')

// 上述代码输入 123456，test()返回Promise


复制代码

async function test (){
    return 'hello world'
}
test().then(res => {
    console.log(res)
})
console.log('123456')

// 输出 123456 hello world
复制代码

await

等待异步 同步化

function f(){
    console.log('f')
}
console.log('1')
async function test() {
    console.log('2')
    await f(); // await 下面的代码会一直等到函数中异步执行完毕，才会执行下面的代码
    console.log('3')
}
test()
复制代码