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)
});
网友评论