es6 Promise用法

Promise是一个异步操作,分为三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled )和Rejected(已失败)。

特点:

一旦状态改变,就不会再变,任何时候都可以得到这个结果。
与事件( Event )的区别:事件错过了的话再去监听,是得不到结果的。

缺点:

1.无法取消Promise,一旦新建它就会立即执行,无法中途取消;
2.如果不设置回调函数,Promise内部抛出的错误,不会反应到外部;
3.当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

用法:
var promise = new Promise((resolve,reject)=>{
  // ... 
  if (/* 异步操作成功 */){
    resolve(res);
  } else {
    reject(error);
  }
})

//Promise 实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。
var promise = new Promise((resolve,reject)=>{
  // ... 
}).then(res=>{
     //成功
     resolve(res);
  }, err=>{
    //失败
     reject(err);
  })

resolve函数表示状态从 “ 未完成 ” 变为 “ 成功 ” ,在异步操作成功时调用,并将异步操作的结果作为参数传递出去。
reject函数表示状态从 “ 未完成 ” 变为 “ 失败 ”,在异步操作失败时调用,并将异步操作的错误作为参数传递出去。

例子:

axios与Promise异步调用接口获取数据:

import axios from 'axios';
import qs from 'qs';
let instance = axios.create({
  baseURL: '',  // 基础url前缀
  timeout: 10000 
});
function fetchApi(url){
  return new Promise((resolve,reject)=>{
    let param = {
      //...
    }
    let config = {
       headers: {'Content-Type': "multipart/form-data"}
    };
    instance.post(url, qs.stringify(param), config)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}
function login() {
    return fetchApi('/login')
}
login();

jquery ajax访问后台接口获取数据:

 $.ajax({
    type: 'post',
    url: '/login',
    data: {
        //传递到后台的参数 没有则不写
        user_name: name,
        password: password
    },
    dataType: 'json',
    success(res) {
        if(res.msgCode == 0){
            //alert('登录成功!');
            window.location.href = '/';
        }else{
            alert("错误码:" + res.msgCode + "," + res.msg);
            window.location.href = '/';
        }
    },
    error(err) {
        alert('登录失败!错误信息:'+ err);
        return;
    }
});

原生ajax范文后台接口获取数据:

var XHR=null;  
var url = ''; 
if (window.XMLHttpRequest) {  
    // 非IE内核  
    XHR = new XMLHttpRequest();  
} else if (window.ActiveXObject) {  
    // IE内核,这里早期IE的版本写法不同,具体可以查询下  
    XHR = new ActiveXObject("Microsoft.XMLHTTP");  
} else {  
    XHR = null;  
}  
if(XHR){  
    XHR.open("GET", url);  
    XHR.onreadystatechange = function () {  
        // readyState值说明  
        // 0,初始化,XHR对象已经创建,还未执行open  
        // 1,载入,已经调用open方法,但是还没发送请求  
        // 2,载入完成,请求已经发送完成  
        // 3,交互,可以接收到部分数据  
        if (XHR.readyState == 4 && XHR.status == 200) {  
            // 这里可以对返回的内容做处理  
            // 一般会返回JSON或XML数据格式  
            console.log(XHR.responseText);  
            // 主动释放,JS本身也会回收的  
            XHR = null;  
        }  
    };  
    XHR.send();  
}  
方法:
Promise.prototype.then()

then方法返回的是一个新的 Promise 实例(注意,不是原来那个 Promise 实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

login(param).then(function(post) {
   return param;
   }).then(res=> {
      console.log("Resolved: ", res);
   }, err=>{
      console.log("Rejected: ", err);
});

第二个then方法指定的回调函数会等待这个新的 Promise 对象状态发生变化。如果变为 Resolved打印res,如果状态变为 Rejected打印err。

Promise.prototype.catch()

1.如果异步操作抛出错误,状态就会变为Rejected,就会调用catch方法指定的回调函数,处理这个错误。
2.then方法指定的回调函数如果运行中抛出错误,也会被catch方法捕获。
3.Promise 对象的错误具有 “ 冒泡 ” 性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。
4.reject方法的作用,等同于抛出错误

var promise = new Promise((resolve, reject)=> {
try {
  throw new Error('test');
} catch(err) {
  reject(err);
}
});
// 等同于
var promise = new Promise((resolve, reject)=> {
  reject(new Error('test'));
});
Promise.all()

接受一个数组作为参数,用于将多个 Promise 实例,包装成一个新的 Promise 实例。

var p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定:
1.只有p1、p2、p3的状态都变成已完成,p的状态才会变成已完成,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
2.只要p1、p2、p3之中有一个被拒绝,p的状态就变成拒绝,此时第一个被reject的实例的返回值,会传递给p的回调函数。

Promise.race()

同样是将多个 Promise 实例,包装成一个新的 Promise 实例
区别:哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

var p = Promise.race([p1,p2,p3]);
Promise.resolve()

将现有对象转为 Promise 对象

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
Promise.reject()

返回一个新的 Promise 实例,该实例的状态为rejected。

var p = Promise.reject(' 出错了 ');
// 等同于
var p = new Promise((resolve, reject) => reject(' 出错了 '))
p.then(null, function (s){
  console.log(s)
});

你可能感兴趣的:(es6 Promise用法)