Promise—给代码一个“承诺”

Promise 是异步编程的一种解决方案，比传统的解决方案回调函数, 更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象 。

一旦状态发生变化，就凝固了，不会再有新的状态变化。这也是 Promise 这个名字的由来，它的英语意思是“承诺”，一旦承诺成效，就不得再改变了。这也意味着，Promise 实例的状态变化只可能发生一次。

Promise 对象通过自身的状态，来控制异步操作。Promise 实例具有三种状态。

• 异步操作未完成（pending)
• 异步操作成功（fulfilled）
• 异步操作失败（rejected）

异步操作成功，Promise 实例传回一个值（value），状态变为fulfilled。 异步操作失败，Promise 实例抛出一个错误（error），状态变为rejected。

1.最简单的promise

function myPromise(){
  return new Promise((resolve, reject) => {
  // resolve 表示成功的回调
  // reject 表示失败的回调
}).then(function (res) {
  // 成功的函数
}).catch(function (err) {
  // 失败的函数
})
}

// 例如这样
// 自己封装ajax
        function ajax(url) {
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open("get", url, true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            console.log('成功');
                            resolve(JSON.parse(xhr.responseText))
                        } else {
                            // 失败
                            console.log('失败');
                            reject(xhr.responseText)
                        }
                    }
                }
            })
        }

2.promise方法

1.Promise.resolve()

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

2.Promise.reject()

Promise.reject('foo')
// 等价于
new Promise((resolve,reject)=> reject('foo'))

3.Promise.all() 全部都成功

传入一个数组，数组中是promise对象，当所有的都是fullfilled或者rejected才会返回给promiseAll，如果执行结果都是fullfilled就执行.then，如果有一个rejected就执行catch函数。

var list =['zjk','zx']
function getData(list){
    var newList = list.map(item=>ajax(`http://localhost:3000/news?author=${item}`))
    return Promise.all(newList)
}
var promiseAll = getData(list).then((res)=>{
    console.log(res);
}).catch((err)=>{
    console.log(err)
})

4.Promise.race() 赛跑，谁快取谁

赛跑，谁先执行完就进谁的执行结果，主要用于超时，也可以一个服务器挂掉了，请求另一个服务器的数据。

var promise = ajax(`http://localhost:3000/news?author=${'zjk'}`)
var promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('超时')
    }, 2000)
})
var promiseRace = Promise.race([promise, promise1]).then(res => {
    console.log(res);
}).catch(res => {
    console.log(res);
})

5.Promise.allSettled()

用来确定一组异步操作是否都结束了，可以对一组请求进行区分了，相比于all要好很多。

allsettled所有的执行结果返回为一个数组，里面有所有函数的执行结果。

var list = ['zjk', 'zx']
function getData(list) {
    var newList = list.map(item => ajax(`http://localhost:3000/news?author=${item}`))
    return Promise.allSettled([...newList,ajax(`http://m.maizuo.com/gateway?cityId=110100&k=4770248`)])
}
var promiseAll = getData(list).then((res) => {
    res.filter(item=>{
        if (item.status==="fulfilled") {
            console.log(item.value);
        }
        if (item.status==="rejected") {
            console.log(item.reason);
        }
    })
// finally没有参数了，访问不到res
}).finally(res=>{
    console.log(res);
})

6.Promise.any()

任意一个resolve成功就行

var list = ['zjk', 'zx']
function getData(list) {
    // 只要有一条成功的就会返回.then，并且返回执行成功的那一条
    var newList = list.map(item => ajax(`http://localhost:3000/news?author=${item}`))
    return Promise.any([...newList,ajax(`http://m.maizuo.com/gateway?cityId=110100&k=4770248`)])
}
// 只要有一个成功就打印成功
var promiseAll = getData(list).then((res) => {
    console.log('登录成功啦',res);
    // 否则就提示都不符合
}).catch(res=>{
    console.log('都不符合哦',res);
})

3.Async/await

async 函数，使得异步操作变得更加方便。

• 更好的语义。
• 返回值是 Promise。

async function test(){
    var res1 =  await ajax("http://localhost:3000/news1")
    var res2 =  await ajax("http://localhost:3000/news2")
    return res2
}

test().then(res=>{
	console.log("返回结果",res)
}).catch(err=>{
	console.log("err",err)
})