vue Promise

Promise

Promise是ES6引入专门用来解决异步的

异步调用

异步效果分析

定时任务
Ajax
事件函数

多次异步调用的依赖分析
- 多次异步调用的结果顺序不确定
- 异步调用结果如果存在依赖需要嵌套（如果嵌套过多，会造成回调地狱）

Promise概述

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

使用promise主要有以下两个好处：

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

Promise基本语法

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务

resolve和reject两个参数用于处理陈宫和失败两种情况，并通过p.path获取处理的结果

var p = new Promise(function(resolve,reject){
　　//成功时调用resolve()
　　//失败时调用reject()
});
p.path(function(ret){
　　//从resolve得到正常结果
},function(ret){
　　//从reject得到错误信息
})；

基于Promise处理Ajax请求

处理原生Ajax

    function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

1、单次请求

queryData(url)
      .then(function(data){
        console.log(data);
      },function(info){
        console.log(info)
      });

2、发送多次ajax请求

    queryData()
      .then(function(data){
        console.log(data)
        return queryData();
      })
      .then(function(data){
        console.log(data);
        return queryData();
      })
      .then(function(data){
        console.log(data)
      });

then参数中饿的函数返回值

1、返回Promise实例对象

返回的该实例对象会调用下一个then

2、返回普通值

返回的普通纸会直接传递给下一个then，通过then参数中的函数接受该值

Promise常用的API

实例方法

p.path() 得到异步任务的正确结果
p.catch() 获取异常信息
p.finally() 成功与否都会执行（尚且不是正式标准）

queryData()
　　.then(function(data){
　　　　console.log(data);
　　})
　　.catch(function(data){

　　　　console.log(data);
　　})
　　.finally(function(){

　　　　console.log('finished');
　　})

对象方法

Promise.all() 并发处理多个异步任务，所有任务都执行完成才得到结果
Promise.race()并发处理多个异步任务，只要一个任务都执行完成就能得到结果

Promise.all([p1,p2,p3]).then((result) => {
　　console.log(result)
})

Promise.race([p1,p2,p3]).then((result) => {
　　console.log(result)
})

vue Promise

推荐阅读