Vue前端交互模式、Promise用法(回调地狱)

猿友 2021-02-18 20:13:24 浏览数 (6671)
反馈

Promise 概述

Promise 是异步编程的一种解决方案,从语法上讲,Promise 是一个对象,从它可以获取异步操作的消息。

优点:

  • 可以避免多层异步调用嵌套问题(回调地狱)
  • Promise 对象提供了简洁的 API,使得控制异步操作更加容易

Promise基本用法

  • 实例化 Promise 对象,构造函数中传递函数,该函数中用于处理异步任务
  • resolve 和 reject 两个参数用于处理成功和失败两种情况,并通过 p.then 获取处理结果
var p = new Promise(function(resolve,reject){
    //实现异步任务...
    //成功时调用
    resolve();
    //失败时调用
    reject();
});
p.then(function(ret){
    //从resolve得到正常结果
},function(ret){
    //从reject得到错误信息
});  

基于 Promise 处理 Ajax 请求

  1. 处理原生 Ajax
function queryData(url){
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState!=4) return;
            if(xhr.status == 200){
                resolve(xhr.responseText);
            }else{
                reject('出错了');
            }
        }
        xhr.open('get',url);
        xhr.send(null);
    });
}
//调用
queryData('http://localhost:3000/data').then(
    function (data) {
        console.log(data);
    },
    function (data) {
        console.log(data);
    }
)
  1. 发送多次 ajax 请求(解决回调地狱)
queryData('http://localhost:3000/data')
    .then(function (data) {
        console.log(data);
        //异常情况可以不处理
        return queryData('http://localhost:3000/data1');
    })
    .then(function (data1) {
        console.log(data1);
        return queryData('http://localhost:3000/data2');
    })
    .then(function (data2) {
        console.log(data2);
    });

then参数中的函数返回值

  1. 返回 Promise 实例对象返回的该实例对象会调用下一个 then
  2. 返回普通值返回的普通值会直接传递给下一个 then,通过 then 参数中函数的参数接收该值

Promise常用的API

1.实例方法

* p.then()得到异步任务的正确结果
* p.catch()获取异常信息
* p.finally()成功与否都会执行(暂时还不是正式标准)
foo()
    .then(function (data) {
        console.log(data);
    })
    .catch(function (data) {
        console.log(data);
    })
    .finally(function () {
        console.log('finish');
    })

也可以写为:

foo()
    .then(function (data) {
        console.log(data);
    },
    function (data) {
        console.log(data);
    })
    .finally(function () {
        console.log('finish');
    })  

2.对象方法

  • Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果
//p1,p2,p3为Promise实例对象任务
Promise.all([p1,p2,p3]).then((result)=>{
    console.log(result);
})
  • Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
Promise.race([p1,p2,p3]).then((result)=>{
    console.log(result);
})


0 人点赞