2020/7/21 axios与promise

最新推荐文章于 2024-09-07 21:42:43 发布

太想进步了

最新推荐文章于 2024-09-07 21:42:43 发布

阅读量680

点赞数

文章标签： axios promise

本文链接：https://blog.csdn.net/qq_44755188/article/details/107501382

版权

本文介绍了Promise的基本使用，包括新建Promise、状态转换和then的处理。接着详细讲解了axios的HTTP请求过程，包括get、post、put和delete方法，并探讨了axios相对于jQuery的优势。此外，还讨论了axios的拦截器机制和如何取消请求。

摘要由CSDN通过智能技术生成

Promise

axios

Promise

new Promise((resolve,reject)=>{}) ES6中new一个Promise对象就处于pending’

调用resolve() 就是属于成功状态

调用reject() 就处于失败状态

用then() 来处理回调函数第一个参数是成功的回调，第二个参数是失败的回调

    new Promise((resolve, reject) => {

        resolve('成功状态');

    }).then(value => {

        //成功的回调函数

    }, reason => {

        //失败的回调

    })

如果是执行resolve() then就会进行成功的回调调用参数为value的方法

如果有多个then 假如是成功的就一次执行then里面的成功的回调函数,多个then 就是产生多个微任务队列，一个个执行

微任务队列也是得主线程的任务执行完了才来轮询微任务队列

微任务是优先宏任务执行的主线程=》微任务=》宏任务

举例说明执行顺序：

 new Promise((resolve, reject) => {

        setTimeout(function() {

            console.log('宏任务');

        }, 0);

        resolve('微任务');

    }).then(value => {

        console.log(value);

    }, reason => {

        //失败的回调

    })

    console.log('主线程');

状态中转：状态改变不可逆

    let p1 = new Promise((resolve, reject) => {

        // reject('失败');

        setTimeout(function() {

            resolve('成功');

        }, 2000)

    });

    new Promise((resolve, reject) => {

        resolve(p1); //p1是什么状态 就执行什么状态的回调 相当于这条语句是上面的 resolve('成功')

    }).then(msg => {

        console.log(msg);

    }, error => {

        console.log(error);

    })

结果是调用失败因为到reject就去执行then了后面成功回调就不管了单向不可逆

既成功或者失败的情况只能触发前面的那个

    new Promise((resolve, reject) => {

        reject("失败")

        resolve('成功');



    }).then(msg => {

        console.log(msg);

    }, error => {

        console.log(error);

    })

</script>



</html>

Promise.then也是一个Promise,但是除了第一个then根据状态来回调的，Promise.then().then…都是执行成功回

    new Promise((resolve, reject) => {

        reject("失败")



    }).then(msg => {

        console.log(msg);

    }, error => {

        console.log(error); //执行失败

    }).then(a => {

        console.log('成功'); //执行成功

    }, b => {

        console.log('失败');

    }).then(a => {

        console.log('成功'); //执行成功

    }, b => {

        console.log('失败');

    })

Promise链式