promise用法

关于异步

• JavaScript语言将任务的执行模式可以分成两种：同步（Synchronous）和异步（Asychronous）。
• “异步模式”一共有4种方法，这4种方法可以写出结构更合理，性能更出色，维护更方便的js代码。这四种模式分别为：

1. 回调函数（callback）；

function f1(callback){
  settimeout(function(){
     //f1代码
     callback();    
},1000);  
}
f1(f2);//一秒后才会执行f2函数

2. 事件监听（Listener）；

elment.addEvenListener("click",handler1,false);
elment.addEvenListener("click",handler2,false);
elment.addEvenListener("click",handler3,false);

3. 观察者模式；

观察者模式也叫发布订阅模式，它定义了一种一对多的关系，让多个观察者同时对监听某一个主题对象，这一个主题对象的状态变化就会通知多有的观察者对象，使得他们能够自动更新自己。
详情转至：观察者模式与订阅发布模式

优点：
1、支持简单的广播通信，自动通知所有已经订阅过的对象。
2、页面载入后，目标对象很容易与观察者存在一种动态关联，增加灵活性。
3、目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

4. promise对象；

promise解决的问题

• promise可以帮忙管理异步方式返回的代码。他讲代码进行封装并添加一个类似于事件处理的管理层。我们可以使用promise来注册代码，这些代码会在在promise成功或者失败后运行。
• 简单的说，它的思想是：每一个异步任务返回一个promise对象，该对象有一个then方法，允许指定回调函数。

ajax回调地狱

function $ajax(param,callback){
  $.ajax({
      url: param.url,
      type: param.type||'get',
      data: param.data || '',
      async:param.async || true,
      success: function(data){
          callback(data);
     },
     error: function(error){
          console.log(error)
    }
  })

function step1(param){
 $ajax(param,function step2(data){
    console.log(data);
    $ajax(param2,function step3(data){
      console.log(data);
      $ajax(param3,function step3(data){
        console.log(data);
      })
    })  
  })
}
step1(param)

 

ajax使用promise

const ajaxPromise = param =>{
    return new Promise((resolve,reject)=>{
            $.ajax({
                url: param.url,
                type: param.type||'get',
                data: param.data || '',
                async:param.async || true,
                success: function(data){
                    resolve(data);
                },
                error: function(error){
                    reject(error)
                }
            })

        })
}

let step1 = () =>{
    return ajaxPromise({url: 'url1', type:'get'})
}
let step2 = () =>{
    return ajaxPromise({url: 'url2', type:'get'})
}
let step3 = () =>{
    return ajaxPromise({url: 'url3', type:'post',data:'xxx'})
}
step1().then(function(res){
    console.log(res);
    return step2()
}).then(function(res){
    console.log(res);
    return step3()
}).then(function(res){
    console.log(res);
}).catch(function(res){
    console.log(res);
    return
})

动画回调地狱

function ani1(){
    //向左走
    console.log('向左走');
    setTimeout(function ani2(){
        //向上走
        console.log('向上走');
        setTimeout(function ani3(){
            //变大
            console.log('变大');
            //......
        },1000)
    },1000)
}
ani1()

promise实现多个动画

function an1(){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log('向上')
                resolve()
        },1000)
    })
}
function an2(){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log('向下')
            resolve()
        },1000)
    })
}
function an3(){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log('变大')
            resolve()
        },1000)
    })
}
function an4(){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            console.log('变圆')
            resolve()
        },1000)
    })
}

an1().then(function () {
    return an2()
}).then(function () {
    return an3()
}).then(function () {
    return an4()
})

• 这样写的优点：回调函数写成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现很多强大的功能。

promise的基本语法及高级用法

promise的基本语法

创建promise对象

1. Promise构造函数要求传入一个函数，并且带有resolve和reject参数
2. 这是两个约束Promise等待的函数，对应成功和失败的状态，
3. 我们的需要处理的异步的逻辑代码在这个函数中进行
4. 将所创建的promise对象作为异步方法的返回值，所有的状态就可以使用它提供的方法控制了

function asyncMethod(){
  return new Promise(function(resolue,reject){
    //这里是要处理的ajax、异步IO、回调动画等异步的代码
    //回调中处理成功写resolve()处理失败写reject()
  })
}

处理Promise状态 promise状态处理

• Promise.then()
  1. 可以接收两个参数，第一个参数是方法 1 处理成功的状态的函数，第二个参数是方法2 处理失败的状态的函数，第二个函数可以省略
  2. 处理promise对象成功状态并接收返回值，也可以处理失败状态并接收返回值
• Promise.catch()
  1. 处理失败状态并接收返回值，如同then的第二个函数（reject状态的回调）
  2. 另一个作用，在执行resolve时抛出异常不会卡死而是进入到catch中处理错误

Promise的链式写法 进阶：链式写法原理

即.then(onfulfilled)或.catch(rejected)会处理在onfulfilled或rejected抛出或返回的值

promiseA+ 原理

1. 如果onfulfilled或 onrejected中所返回的值是一个 Promise对象,则该 Promise对象会被加入到 Promise的处理链中。
2. 如果 unfulfilled或 onreiected中返回的值并不是一个 Promise对象,则会返回一个已经进入成功状态的 Promise对象
3. 如果onFulfilled或 onrejected中因为 throw语句而抛出一个错误err,则会
   返回一个已经进入失败状态的 Promise对象
4. 如果 Promise对象链中的某一环出现错误, Promise对象链便会从出错的环节开始,不断向下传递,直到出现任何一环的 Promise对象对错误进行响应为止。

animate ()
.then(()=> animate2())
.then(()=> animate3())
.then(()=> animate4())
.catch(err =>{
  console. error(err)
  return animate5()
})
.then(/*...*/)
.catch(err=>console, error(err))

Promise高级使用方法 .all .race .reject .resolve 方法原理

1. Promise.all(需要处理的异步函数的数组);
   • 数组中所有的对象都处于成功状态。那么all方法返回的promise对象也会进入成功状态，并以一个可迭代的对象承载其中所有的返回值
   • 如果数组中有一个失败了，那么all方法返回的promise对象会进入失败状态，并以失败的那个错误信息当做promise对象自己返回的错误信息

const promises=[async(1),async(2),async(3),async(4)];

Promise.all(promises).then(function(){
    console.log(value);
})

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

2. Promise.race(需要处理的异步函数的数组);
   只要有异步的函数执行完成就可以在then中执行回调中拿到的数据，同时没有完成的回调继续执行。

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  // 两个都完成，但 p2 更快
});

var p3 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "three");
});
var p4 = new Promise(function(resolve, reject) { 
    setTimeout(reject, 500, "four"); 
});

Promise.race([p3, p4]).then(function(value) {
  console.log(value); // "three"
  // p3 更快，所以它完成了              
}, function(reason) {
  // 未被调用
});

var p5 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "five"); 
});
var p6 = new Promise(function(resolve, reject) { 
    setTimeout(reject, 100, "six");
});

Promise.race([p5, p6]).then(function(value) {
  // 未被调用             
}, function(reason) {
  console.log(reason); // "six"
  // p6 更快，所以它失败了
});

3. Promise.reject() //只抓取失败的

Promise.reject(new Error('fail')).then(function() {
  // not called
}, function(error) {
  console.log(error); // Stacktrace
});

4. Promise.resolve() //只抓取成功的

Promise.resolve('Success').then(function(value) {
  console.log(value); // "Success"
}, function(value) {
  // not called
});

一个不错的地址

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

兼容情况

在浏览器端，一些主流的浏览器都已经可以使用 Promise 对象进行开发，在 Node.js 配合 babel 也可以很方便地使用。

如果要兼容旧的浏览器，建议可以寻找一些第三方的解决方案，例如 jQuery 的 $.Deferred。

转载于:https://www.jianshu.com/p/080e9208ffba