/*
-
- promise讲解
-
- 原生js中实现promise
-
- jquery中实现promise
-
- node启静态文件服务
*/
- node启静态文件服务
Promise 是什么
一种异步解决方案，相当于一种规范。
如果遇到多个接口调用的时候，这时候就尽管使用promise就可以了
以前处理异步的方式
$.ajax({
// ....,
success:function(){ //成功之后的状态 id
// 获取到id；
// name
$.ajax({
// id
success:function(){
// name
$.ajax({
// id
success:function(){
// name
}
})
}
})
}
});
Promise 详细介绍
Promise 解决js中多个异步回调优化/维护...的问题。
异步
同步
原生js提供了promise对象
let pro = new Promise();
es6中promise对象是一个构造函数，用来生成promise实例。
// axios
js jQuery中实现
//原生js封装公共的promise对象
const getJSON = function(url,type,data){
const promise = new Promise(function(resolve,reject){
const handler = function() {
if(this.readyState !==4){
return;
};
if(this.status === 200){ //成功的状态
resolve(this.response);
}else{ //失败
reject(new Error(this.statusText));
}
};
const client = new XMLHttpRequest();//创建对象
client.open(type,url);//建立连接
client.onreadystatechange = handler;
client.responseType = 'json';//数据格式
if(type =='get'){
client.send(); //发送get请求
}else{
client.setRequestHeader("Content-type","application/json");//头信息
client.send(JSON.stringify(data));
}
});
return promise;
}
//使用封装的promise：
// post请求
getJSON("http://localhost:3000/add","post",{name:name,msg:msg})
.then(function(res){ //成功
console.log(res);
for(let i=0;i<res.length;i++){
$(".messageList").append(`<li class="list-group-item">${res[i].name}
<span>说：</span> ${res[i].msg}
</li>`);
}
},function(error){ //失败
console.log(error);
});
//get请求
getJSON("http://localhost:3000/add","get")
.then(function(res){ //成功
console.log(res);
},function(error){ //失败
console.log(error);
})
// //链式写法 串行
getJSON("http://localhost:3000/add","get")
.then(function(res){ //成功 第一个请求完成了， id
console.log(res);
},function(err){
console.log(err);
})
.then(function(){ //再进行另一个请求
// name 订单里的名称
},function(err){
console.log(err);
})
.then(function(){ //再进行另一个请求
// name 订单里的名称
})
.then(function(){
// name 订单里的名称
},function(err){
console.log(err);
})
// jq
$(function(){
//提交
$(".container .submit").click(()=>{
let _name = $(".name").val();
let _msg = $(".message").val();
if(_name == '' || _msg==''){
alert("请输入内容");
}else{
$(".name,.message").val("");
//列表展示
// 第一种写法
$.ajax({
url:'http://localhost:3000/add',
type:'post',
data:{name:_name,msg:_msg},
dataType:'json'
})
.then(function(res){
})
.then(function(res){
})
.then(function(res){
})
.catch(function(err){
})
// 第二种写法
$.ajax({
url:'http://localhost:3000/add',
type:'post',
data:{name:_name,msg:_msg},
dataType:'json'
})
.done(function(res){
console.log(res);
for(let i=0;i<res.length;i++){
$(".messageList").append(`<li class="list-group-item">${res[i].name}
<span>说：</span> ${res[i].msg}
</li>`);
}
})
.fail(function(err){
console.log(err);
})
// 两者的区别：done不支持链式写法，不会延续任务的调用。 then则相反。
// 只需要调用一次 done
// 链式写法 then
}
});
})
//jq串行写法
$(function(){
//提交
$(".queryThen").click(()=>queryThen());
let queryThen = ()=>{
//发送的第一个请求 id
$.ajax({
url:'http://localhost:3000/add',
type:'get',
dataType:'json'
})
.then(function(res){ //成功
// id
// 发送的第二个请求
return $.ajax({
url:'http://localhost:3000/add2',
type:'post',
data:{name:_name,msg:_msg},
dataType:'json'
})
})
.then(function(res){
},function(err){
})
}
});
//jq 并行 两个请求同时发
$(function(){
//提交
$(".queryWhen").click(()=>queryWhen());
let queryWhen = ()=>{
//发送的第一个请求 id
$.when($.ajax({url:'http://localhost:3000/add',type:'get',dataType:'json'}),
$.ajax({url:'http://localhost:3000/add',type:'post',dataType:'json',{name:_name,msg:_msg}))
.then(function(data1,data2){ //成功
console.log(data1);
console.log(data2);
})
}
});
Promise.then()
// //链式写法 串行
getJSON("http://localhost:3000/add","get")
.then(function(res){ //成功 第一个请求完成了， id
console.log(res);
},function(err){
console.log(err);
})
.then(function(){ //再进行另一个请求
// name 订单里的名称
},function(err){
console.log(err);
})
.then(function(){ //再进行另一个请求
// name 订单里的名称
})
.then(function(){
// name 订单里的名称
},function(err){
console.log(err);
})
Promise.catch()
$.ajax({
url:'http://localhost:3000/add',
type:'post',
data:{name:_name,msg:_msg},
dataType:'json'
})
.then(function(res){
})
.then(function(res){
})
.then(function(res){
})
.catch(function(err){
})
Promise.all()
//原生js并行的实现
$(function(){
//提交
$(".queryWhen").click(()=>queryWhen());
let queryWhen = ()=>{
//并行 两个请求同时发
let getPromsie1 = new Promise(function(resolve,reject){
getJSON("http://localhost:3000/add","get")
.then(function(res){ //成功
console.log(res);
},function(error){ //失败
console.log(error);
});
});
let getPromsie2 = new Promise(function(resolve,reject){
getJSON("http://localhost:3000/add","post",{name:'aa'})
.then(function(res){ //成功
console.log(res);
},function(error){ //失败
console.log(error);
});
});
promise.all([getPromsie1,getPromsie2])
.then(([data1,date2])=>{ //成功
console.log(data1);
console.log(date2);
},function(err){ //失败
console.log(err);
})
}
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
