ES6-Promise用法

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

特点:

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

缺点:

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

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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异步调用接口获取数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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访问后台接口获取数据:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
$.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范文后台接口获取数据:
```js
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方法。

1
2
3
4
5
6
7
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方法的作用,等同于抛出错误

1
2
3
4
5
6
7
8
9
10
11
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 实例。

1
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 实例 区别:哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

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

Promise.resolve()

将现有对象转为 Promise 对象

1
2
3
Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

Promise.reject()

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

1
2
3
4
5
6
var p = Promise.reject(' 出错了 ');
// 等同于
var p = new Promise((resolve, reject) => reject(' 出错了 '))
p.then(null, function (s){
console.log(s)
});
  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2024 翟天野

请我喝杯咖啡吧~