ES6精讲11-Promise的基本使用

1.Promise对象是个啥？

• 相当于一个容器，保存着未来才会结束的事件(异步操作)的一个结果
• 各种异步操作都可以用同样的方法进行处理 axios

🌵Promise的特点：

• 对象的状态不受外界影响 处理异步操作 三个状态 Pending(进行) Resolved(成功) Rejected(失败)
• 一旦状态改变，就不会再变，任何时候都可以得到这个结果

截图解释小结：

• catch方法：捕获异常的
• then方法：表示从pending状态到resolve
• catch方法：表示从pending状态到reject

2.Promise的具体执行

看下面代码🌰示例

let pro = new Promise(function(resolved,rejected) {
//执行异步操作
let res = {
    code: 201,
    data:{
        name:'小马哥'
    },
    error:'失败了'
}
setTimeout(() => 
{
    if(res.code === 200)
    {
      resolved(res.data); //🌵①这里resolved后，参数res.data会成为then函数的第一个参数函数的参数
     }
    else
    {
      rejected(res.error);//🌵②这里的error会成为then函数的第二个参数函数的参数
     }
            }, 1000);
})
        
console.log(pro);
pro.then((val)=>{
    console.log(val); //🌵③如果上面rs的code为200，那么走这里，返回的值为data对象
},(err)=>{
    console.log(err);//🌵④如果上面rs的code不是200，那么走err，返回的值为“失败了”   
});

流程梳理：(then函数会接收两个函数作为参数)

• ①号位置那里，resolved后，参数res.data会成为then函数的第一个参数函数的参数
• ②号位置那里，rejected后，error会成为then函数的第二个参数函数的参数
• ③如果上面res的code为200，那么走这里，返回的值为data对象
• ④如果上面res的code不是200，那么走err，返回的值为“失败了”

3.使用promise发送请求

function timeOut(ms) {
    return new Promise((resolved,rejected)=>{
        setTimeout(() => {
            resolved('hello promise success!!')
        }, ms);
    })
}

//异步请求到数据后，then中才会拿到val的值
 timeOut(2000).then((val)=>{
     console.log(val);
 })

• 用一个函数包裹着一个new Promise，请求到的数据会被搞到val中