<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue---Promise</title>
<script></script>
</head>
<body>
知识点一：promise语法
(1)自定义变量 = new Promise(function(resolve，reject){异步任务结果}
打印处理结果的调用方式是 通过 自定义变量.then(function(正确结果参数自定义){},function(错误结果参数自定义){})
知识点二：promise里的then函数返回值 拿到的就是上一个实例对象返回的值 如果是一个固定的值 那拿到的就是固定的值 就是他的上一个
知识点三：promise的实例方法 都是包的函数
(1).then 得到异步任务的正确返回信息 可以有两个函数 如果只有一个函数那就是resolve
(2).catch 接收错误的返回信息 跟.then方法的第二个函数效果一样
(3).finally 成功不成功都会执行，可以添加提示信息
知识点四：promise的对象方法
(1)Promise.all同时处理多个异步任务 所有任务执行完毕才会得到结果 P1p2p3代表的是三个异步任务
Promise.all([p1,p2,p3]).then(function(result){
console.log(result)
})
(2)Promise.race 同时处理多个异步任务 只要有结果返回就得到结果 语法结构同all
Promise.race([p1,p2,p3]).then(function(result){
console.log(result)
})
<script>
// 基于promise语法结构的定时任务
// 创建promise实例对象
// var p = new Promise(function(resolve,reject){
// setTimeout(function(){
// var flag = 1
// if(flag != 1 ){
// // 正常情况
// resolve('我是正常情况resolve输出的')
// }else{
// // 错误情况
// reject('我是错误情况reject输出的')
// }
// },1000);
// })
// // p的调用函数跟上面一样 第一个函数对用的resolve 第二个函数对应的是reject
// p.then(function(data){
// console.log(data);
// },function(data){
// console.log(data);
// })
// ============================================================================
// 基于promise语法的发送ajax请求 解决发送多个请求顺序不一致的问题
function ajax(url){
var pro = new Promise(function(resolve,reject){
// 原生ajax创建实例对象
var xhr = new XMLHttpRequest();
xhr.readyStatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200){
resolve(xhr.responseText)
}else{
reject('服务器错误')
}
}
xhr.open('get',url)
xhr.send()
});
return pro;
}
// 单条请求发送 第一个函数对应resolve 第二个函数对应reject
ajax('url')
.then(function(data){
console.log(data);
},function(data){
console.log(data);
})
// 多条请求发送 只展示成功数据 这样可以保证执行顺序
ajax('url')
.then(function(datd){
console.log(datd);
return ajax('url1')
})
// 此时这个then的调用者是url的返回值也就是另一个请求
.then(function(data){
console.log(data);
return ajax('url2')
})
// 此时这个then的调用者是url2的返回值
.then(function(data){
console.log(data);
})
</script>
</body>
</html>
