Promise对象

什么是promise?

一个promise对象代表一个在这个promise被创建出来时不一定已知值的代理。它让你能够把异步操作最终的成功返回值或失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个promise，以便在未来某个时候把值交给使用者。

promise对象有什么用？

promise对象用于表示一个异步操作的结果（成功/失败）及其结果值。

promise的状态

一个promise必然有以下几种状态：

1.待定（pending）：初始状态，既没有成功，也没有被拒绝。

let p = new Promise((resolve, reject) => {
    setTimeout(() => {

    }, 1000)

})

console.log(p);

2.已成功（fulfilled/resolved）：操作成功

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve()
    }, 1000)

})

console.log(p);

3.已拒绝（rejected）：操作失败

 

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject()
    }, 1000)

})

console.log(p);

 promise.resolve

将现有的对象转换为promise对象

let p1 = Promise.resolve('帅哥')
console.log(p1);

等价于

let p1 = new Promise(resolve => resolve('帅哥') )
console.log(p1);

 最终都是一样的结果

 也能是一个对象

let p1 = Promise.resolve({name:"张三", age:20})
console.log(p1);

promise.reject

let p1 = Promise.reject('err')
//使用catch捕获错误
p1.catch(err => {
    console.log(err);
})

 封装Ajax请求

function ajax(meths, url){
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.open(meths, url, true)
        xhr.send()
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status <300) {
                    resolve(JSON.parse(xhr.responseText))
                } else {
                    reject(xhr.status)
                }
            }
        }
    })
}

ajax("GET", "http://localhost:3000/users").then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

async和await (es7)

简单来说async 和 await 更像是primise对象的语法糖。能够更加简洁的写出基于promise对象的异步代码。无需刻意的调用then方法。

async 返回的是一个promise对象

async function a() {
    console.log(123);
}
console.log(a())

 

async function a() {
    return '123'
}
//等价于
function a() {
    return Promise.resolve('123')
}

 搭配await使用

async 函数的函数体可以被看作是由 0 个或者多个 await 表达式分割开来的。从第一行代码直到（并包括）第一个 await 表达式（如果有的话）都是同步运行的。这样的话，一个不含 await 表达式的 async 函数是会同步运行的。然而，如果函数体内有一个 await 表达式，async 函数就一定会异步执行。

async function a() {
    let res = await ajax("GET", "http://localhost:3000/users")
    console.log(res);
}