初识 Promise
Promise 使用
promise 是一种异步操作方法，可以处理异步请求的不同结果无论是请求成功或者失败
Promise的基本操作 与快速入门
promise 不仅可以用于前端也可以用于后端 node,最基本的操作就是 new promise 对象 设置好里面的回调函数 ,之后写 不同的回调函数的引用条件
let p = new promise ((resolve,reject)=>{
// 里面写异步操作不同的返回值
if（xx）{
resolve()
}
else{
reject()
}
})
p.then(resolve 的回调函数，reject 的回调函数)
这里用 express写好了后端接口
app.all('/testpromise',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.send('测试promise');
});
app.all('/testpjax',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.send('测试pjax');
})
前端 promise 和ajax 的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2> promise 封装 AJAX</h2>
<button> 点击发送 AJAX</button>
<script>
const btn =document.querySelector('button');
btn.addEventListener('click',function(){
const p=new Promise((resolve,reject)=>{
let xhr=new XMLHttpRequest();
xhr.open('GET','http://127.0.0.1:9000/testpromise');
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status>=200 && xhr.status<300){
resolve(xhr.response);
}
else{
reject(xhr.status);
}
}
}
});
p.then(value=>{console.log(value+'测试成功');},
reason=>{console.warn(reason)});
})
</script>
</body>
</html>
前端封装调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2> promise 封装 AJAX</h2>
<button> 点击发送 AJAX</button>
<script>
const btn =document.querySelector('button');
function sendJax(url){
return new Promise((resolve,reject)=>{
let xhr= new XMLHttpRequest();
xhr.open('GET',url);
xhr.send(null);
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status>=200&& xhr.status<300){
resolve(xhr.response);
}
else{
reject(xhr.status)
}
}
}
})
}
btn.addEventListener('click',function(){
let p= sendJax('http://127.0.0.1:9000/testpjax');
p.then(value=>{console.log(value+'测试成功p');},
reason=>{console.warn(reason)});
})
</script>
</body>
</html>
后端 promise 封装异步 操作 直接传递 promise对象
const { rejects } = require('assert');
/**
* 封装 一个 mineReadFile 读取文件内容
* 参数： path 文件路径
* 返回 promise 对象
*/
function mineReadFile(path){
return new Promise((resolve,reject)=>{
require('fs').readFile(path,(err,data)=>{
if(err) {reject(err)};
resolve(data);
});
})
}
mineReadFile('./content.txt').then(value=>{console.log(value.toString());},
reason=>{
console.log(reason);
}
)
使用 util.promisify 快速封装
/**
* util.promisify 方法
*/
// 引入util 模块
const util =require('util');
const fs=require('fs');
let mineReadFile=util.promisify(fs.readFile);
// 返回一个新函数
mineReadFile('./content.txt').then(value=>{
console.log(value.toString());
})
Promise 的属性
PromiseState 分为 pending 未决定 ，resolved 成功, rejected 失败
Promise 对象的值
PromiseRresult 保存 异步任务的值
resolve 或者 reject可以修改这个值
promise 的工作流程
promise 根据构造器判断使用哪个 回调，回调会返回一个新的Promise 实例
then 后面的是一个回调函数
Promise 的API
Promise((resolve,reject)=>{})
p.then(回调1，回调2)
Promise.resolve()
如果传入的参数是非Promise类型的对象，则返回的结果是 成功promise 对象
如果传入的是Promise对象 ，则参数的结果反映了 resolve的结果
let p1=Promise.resolve(new Promise((resolve,reject)=>{
reject('ERROR');
}))
p1.catch(reason=>{
console.log(reason)
})
promise.reject()
无论传递什么参数都是失败的reject
Promise.all()
内部是一个promises 数组 只有所有 promise对象都为成功才会成功，只有一个失败就会直接失败，失败的值为那个唯一失败的值
Promise.race() 方法
（promise）=>{ }
promise 包含 n 个 Promise 的数组 第一个成功的 promise 对就是返回的结果 就是由于存在多个异步操作 可以说使用异步操作就可以使用多个异步操作赛跑
let p0=new Promise((resolve,reject)=>{
resolve('ok');
});
let p1=Promise.resolve('ok2');
let p2 =Promise.reject('err');
p2.catch(reject=>{
console.log(reject);
})
// console.log(p2);
let p3=Promise.all([p0,p1,p2]);
let p4=Promise.race([p0,p1,p2,p3]);
console.log(p3);
console.log(p4);
Promise 改变状态
1.通过 resolve 函数 pedding =》 resolved
2.通过 reject 函数 pedding=》rejected
3.抛出错误 throw ‘erro'
Promise 指定多个成功/失败的回调函数 都会调用吗 就是 状态发生变化 ，then指定的回调都可以 被执行
Promise.then() 返回 结果
的新Promise .then的结果状态由什么决定 看回调函数里面的内容
- 返回了 throw 就是报错
- 返回 Promise 对象 就是 Promise 对象
- 正常输出就是 返回 成功的对象 返回值是undefined
Promise
let p1= new Promise((resolve,reject)=>{
resolve('ok')
});
let p2= p1.then(data=>{
// throw 'err'
return new Promise((resolve,reject)=>{
reject('ok2')
})
// console.log('结束了');
},reason=>{
console.log('运行不了');
})
console.log(p2);
Promise 链的错误穿透 与中断 then 是要在 上一个promise状态改变之后才会触发回调
let p1=new Promise((resolve,reject)=>{
resolve('ok');
})
p1.then( value=>{
return Promise.resolve('ok2')
}
).then(value=>{
console.log(value);
})
中断 promise 链
中间返回空的Promise 对象
错误穿透 在最后面 加入 catch 函数
let p1=new Promise((resolve,reject)=>{
resolve('ok');
})
p1.then( value=>{
// return new Promise(()=>{})
throw 'erro'
}
).then(value=>{
console.log(value);
}).catch(reason=>{
console.log(reason)
})
