一、简介
Promise是异步编程的一种解决方法，比传统的回调函数和事件更合理更强大。ES6将其写进js语言标准，统一了用法，原生提供了promise对象。所谓Promise“承诺”，就是保存着未来会发生的事情，Promise有三种状态：pending（“进行中”），fulfilled（“已成功”），rejected（“已失败”），并且一旦进入后两种状态就不可更改，它的状态之手异步操作结果控制。
二、用法：
新建一个Promise对象：
var promise = new Promise(function(resolve,reject){
//some code
if(success){ //异步操作成功
resolve(value);
}else{ //异步操作失败
reject(error);
}
})
Promise构造函数接收一个函数作为参数，它的两个参数resolve和reject，是两个函数，由JavaScript引擎提供，不用自己部署。
resolve函数的作用是：将Promise的状态从“pending”变为“resolve”，在异步操作成功时调用，并将异步操作的结果作为参数传递出去；
reject函数的作用是：将Promise状态从“pending”变为“reject”，在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。
axios就是基于Promise的用于浏览器和node的http客户端，下面是在所作项目中axios的用法，是搜索页面的接口。其中的then就是resolve的内容，catch就是reject的内容。当然，self.getRequest是用axios封装后的全局变量。
let url = 'search/' + self.searchType;
let model = {};
let page = self.currentPage - 1;
model = {
searchValue: self.searchValue,
page: page,
size: 10,
operatingStatus: self.operatingStatus,
establishTimeType: self.establishTimeType,
};
self.getRequest(url, model).then((res) => {
self.successCallBack(res);
}).catch(err => {
console.log(err);
self.nodata = true;
self.loading = false;
});
异步操作抛出错误状态成reject，或then方法指定的回调函数中发生错误，就会被catch方法捕获。Promise的错误具有冒泡性质，可以一直向后传递到被最后一个catch捕获。
封装axios的get请求，作为全局变量使用。
export const getRequest = (url, params) => {
return axios({
method: 'get',
url: url,
params: params,
});
}
三、其他后台接口获取数据方式
1、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;
}
});
2、原生ajax范文后台接口获取数据：
var XHR=null;
var url = '';
if (window.XMLHttpRequest) {
XHR = new XMLHttpRequest(); // 非IE内核
} else if (window.ActiveXObject) {
XHR = new ActiveXObject("Microsoft.XMLHTTP"); // IE内核,这里早期IE的版本写法不同,具体可以查询下
} 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();
}
四、方法
1、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。
2、Promise.resolve()
将现有对象转为 Promise 对象
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))
3、Promise.reject()
返回一个新的 Promise 实例，该实例的状态为rejected。
var p = Promise.reject(' 出错了 ');
// 等同于
var p = new Promise((resolve, reject) => reject(' 出错了 '))
p.then(null, function (s){
console.log(s)
});
网友评论