前端一文搞懂Promise 再也不害怕面试官问的问题啦~

前端面试，前端Promise一文搞懂（只讲解工作中能用到的方法）

一、Promise的出现是为了解决异步的嵌套问题，导致代码太多严重的时候可能会出现嵌套地狱的问题
二、Promise的返回值解析（pedding fulfilled rejected）
1、pedding 当promise 状态没有被改变的时候 一直会处在pedding状态，我们可以把它当作等待状态
2、pedding 当promise 状态有被改变的时候（调用resolve),那么promise会处在fulfilled状态，我们可以把它当作请求成功状态
3、pedding 当promise 状态有被改变的时候（调用reject),那么promise会处在rejected状态，我们可以把它当作请求拒绝状态
三、看成功的回调效果

源代码截图：

源代码：

// 1.promise  Async await

// 2.proxy

// 3.Module
import React from 'react'

export default function index() {
    // 同步和异步   同步是按照顺序  常见的异步 ：定时器  Ajax
    const p1 = new Promise((resolve, reject) => {
        resolve('任务1:成功')
        // reject('失败')
    })
    //调用resolve
    p1.then((res)=>{
        console.log(res);
        return new Promise((resolve, reject) => {
            resolve('任务2:成功')
            // reject('失败')
        })
    },err=>{
        console.log('任务1:失败');
        //任务1的失败结果可能会被任务2的失败结果捕获
        throw new Error('任务1失败')
    })
    .then((res)=>{
        console.log(res)
    },err=>{
        console.log('任务2:失败');
        
    })
    console.log(p1)
    return (
        <div>

        </div>
    )
}

四、看失败的回调效果

源代码截图：
源码：

// 1.promise  Async await

// 2.proxy

// 3.Module
import React from 'react'

export default function index() {
    // 同步和异步   同步是按照顺序  常见的异步 ：定时器  Ajax
    const p1 = new Promise((resolve, reject) => {
        // resolve('任务1:成功')
        reject('失败')
    })
    //调用resolve
    p1.then((res)=>{
        console.log(res);
        return new Promise((resolve, reject) => {
            // resolve('任务2:成功')
            reject('失败')
        })
    },err=>{
        console.log('任务1:失败');
        //任务1的失败结果可能会被任务2的失败结果捕获
        throw new Error('任务1失败')
    })
    .then((res)=>{
        console.log(res)
    },err=>{
        console.log('任务2:失败');
        
    })
    

    console.log(p1)
    return (
        <div>

        </div>
    )
}

六、注意事项
成功状态不用多说，失败的回调必须要注意，因为失败的回调参数传参必须是链式回调的.then的第二个参数，.then的第一个是调用对象的返回结果，第二个才是返回的失败调用的错误返回