promise随笔

最新推荐文章于 2023-07-11 17:54:23 发布

daily886

最新推荐文章于 2023-07-11 17:54:23 发布

阅读量430

点赞数

分类专栏： React Native js笔记 ECMAScript 6笔记(javascirpt的下一版) 文章标签： javascript

本文链接：https://blog.csdn.net/daily886/article/details/70859757

版权

ECMAScript 6笔记(javascirpt的下一版) 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

React Native js笔记

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<script>
console.dir(Promise);
//Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法喽，没错。

//调用promise-----------------------------------------
var p = new Promise(function(resolve, reject){
//做一些异步操作
// setTimeout(function(){
// console.log('执行完成');
// resolve('随便什么数据');
// }, 2000);

$.get("https://api.github.com/search/repositories?q=javascript&sort=stars",function(result,status){
//ajax语法 $.get(URL,data,function(data,status,xhr),dataType); // data和datatype可选
// resolve(status);
if(status == 'success'){
resolve('调用成功1'); //promise的参数resolve，reject可以替代return，用来返回参数或者错误
}else{
reject(status); //promise的参数resolve，reject可以替代return，用来返回参数或者错误

}

console.log(result);
console.log('ajax结束');

});
});
//promise是构造函数，系统自动调用

//封装promise-------------------------------------------
function ajax(url, data, callback) {
var p = new Promise(function (resolve, reject) {
$.ajax({
url: url,
type: data == null ? 'GET' : 'POST',
dataType: "json",
data: data == null ? '' : JSON.stringify(data),
async: true,
contentType: "application/json",
success: function (resp) {
if(typeof(callback) == 'function'){
callback(resp);
}
resolve(resp);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
reject(XMLHttpRequest.status+XMLHttpRequest.statusText);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
}
});
});
return p;
}

ajax('https://api.github.com/search/repositories?q=javascript&sort=stars').then(function(data){
console.log(data);
notfound;
console.log(111);
})
//notfound 是一个未定义的字符串，会报错
//.catch是捕获代码的异常，使用后不会报错卡死js
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
//以上是promise的封装

//promise最主要作用是链式操作--------------------------------
function linkajax(url, data, callback) {
var p = new Promise(function (resolve, reject) {
$.ajax({
url: url,
type: data == null ? 'GET' : 'POST',
dataType: "json",
data: data == null ? '' : JSON.stringify(data),
async: true,
contentType: "application/json",
success: function (resp) {
if(typeof(callback) == 'function'){
callback(resp);
}
resolve(resp);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
reject(XMLHttpRequest.status+XMLHttpRequest.statusText);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
}
});
});
return p;
}

linkajax('https://api.github.com/search/repositories?q=javascript&sort=stars')
.then(function(data){
console.log('linkajax1返回数据');
console.log(data);
return linkajax('https://api.github.com/search/repositoriesf?q=javascript&sort=stars');
//链接地址错误，报错
})
.then(function(data){
console.log('linkajax2返回数据');
console.log(data);
return linkajax('https://api.github.com/search/repositories?q=javascript&sort=stars');
})
.then(function(data){
console.log('linkajax3返回数据');
console.log(data);
})
//在使用链式操作then时，promise会以从上往下顺序执行，其中一个方法报错，后面的不会会执行

//Promise的all方法提供了并行执行异步操作的能力，----------------------------------------
//并且在所有异步操作执行完后才执行回调。
Promise
.all(
[
linkajax('https://api.github.com/search/repositories?q=javascript&sort=stars'),
linkajax('https://api.github.com/search/repositories?q=javascript&sort=stars'),
linkajax('https://api.github.com/search/repositories?q=javascript&sort=stars')
]
)
.then(function(results){
console.log(results); //这是一个数组
//三个异步操作返回的数据都在then里面，all会把所有异步操作的结果放进一个数组中传给then，
//就是上面的results
});

//all方法的效果实际上是「谁跑的慢，以谁为准执行回调」，---------------------------------------
//那么相对的就有另一个方法「谁跑的快，以谁为准执行回调」，
//这就是race方法，这个词本来就是赛跑的意思。race的用法与all一样：
function raceajax1(url, data, callback) {
var p = new Promise(function (resolve, reject) {
$.ajax({
url: url,
type: data == null ? 'GET' : 'POST',
dataType: "json",
data: data == null ? '' : JSON.stringify(data),
async: true,
contentType: "application/json",
success: function (resp) {
if(typeof(callback) == 'function'){
callback(resp);
}
console.log(resp);
resolve(resp);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
reject(XMLHttpRequest.status+XMLHttpRequest.statusText);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
}
});
});
return p;
}
function raceajax2(url, data, callback) {
var p = new Promise(function (resolve, reject) {
$.ajax({
url: url,
type: data == null ? 'GET' : 'POST',
dataType: "json",
data: data == null ? '' : JSON.stringify(data),
async: true,
contentType: "application/json",
success: function (resp) {
if(typeof(callback) == 'function'){
callback(resp);
}
console.log(resp);
resolve(resp);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
reject(XMLHttpRequest.status+XMLHttpRequest.statusText);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
}
});
});
return p;
}
function raceajax3(url, data, callback) {
var p = new Promise(function (resolve, reject) {
$.ajax({
url: url,
type: data == null ? 'GET' : 'POST',
dataType: "json",
data: data == null ? '' : JSON.stringify(data),
async: true,
contentType: "application/json",
success: function (resp) {
if(typeof(callback) == 'function'){
callback(resp);
}
console.log(resp);
resolve(resp);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
reject(XMLHttpRequest.status+XMLHttpRequest.statusText);
//promise的参数resolve，reject可以替代return，用来返回参数或者错误
}
});
});
return p;
}

Promise
.race(
[
raceajax1('https://api.github.com/search/repositories?q=javascript&sort=stars'),
raceajax2('https://api.github.com'),
raceajax3('https://api.github.com/search/repositories?q=javascript&sort=stars'),
]
)
.then(function(results){
console.log(results);
//在then里面的回调开始执行时，
//由于raceajax2执行较快，
//将获得结果raceajax2的返回值。其他的promise继续运行，但执行结果将不会被then捕获
});

</script>
</body>
</html>