Promise介绍
Promise是一个构造函数，是异步编程的一种解决方案。所谓Promse,它本身就是一个容器，里面保存着异步操作的结果，对的，这和回调函数类似。
Promise容器本身不是异步的，而里面封装一个异步任务。他有三种状态，即：1.pending(进行中)、2.resolved(成功)、3.rejected(失败)。状态只能变为一种。
Promise获取文件信息
constfs=require('fs');
letp1=newPromise((resolve,reject)=>{
fs.readFile('./data/a.txt','utf8',(error,data)=>{
if(error){
reject(error);
}else{
resolve(data);
}
});
});
letp2=newPromise((resolve,reject)=>{
fs.readFile('./data/b.txt','utf8',(error,data)=>{
if(error){
reject(error);
}else{
resolve(data);
}
});
});
letp3=newPromise((resolve,reject)=>{
fs.readFile('./data/c.txt','utf8',(error,data)=>{
if(error){
reject(error);
}else{
resolve(data);
}
});
});
//then的链式编程
p1
.then(data=>{
console.log('a的数据',data);
//当p1读取成功的时候
//当前函数中return的结果就是后面的then中Function接收到
//当你return123后面就接收到123
//没有return,后面接收到的就是undefined
//上面那些return的数据没什么软用
//真正有用的事，return一个Promise对象
//当return一个Promise对象的时候，后续的then中的方法的第一个参数会作为这个对象的结果
returnp2;
},error=>{
console.log('读取文件a失败了',error);
})
.then(data=>{
console.log('b的数据',data);
returnp3;
},error=>{
console.log('读取文件b失败了',error);
})
.then(data=>{
console.log('c的数据',data);
},error=>{
console.log('读取文件c失败了',error);
})
显然，上面这个例子显得特别麻烦！
选择，让我们封装Promise
constfs=require('fs');
constpReadFile=(filePath)=>{
returnnewPromise((resolve,reject)=>{
fs.readFile(filePath,'utf8',(error,data)=>{
if(error){
reject(error);
}else{
resolve(data);
}
});
});
};
pReadFile('./data/a.txt')
.then(data=>{
console.log('a文件数据:',data);
returnpReadFile('./data/b.txt');
})
.then(data=>{
console.log('b文件数据:',data);
returnpReadFile('./data/c.txt');
})
.then(data=>{
console.log('c文件数据:',data);
});
Promise配合AJAX获取信息
data.json文件：
{
"users":[
{
"id":1,
"username":"admin-1",
"age":18,
"job":2
},
{
"id":2,
"username":"admin-2",
"age":18,
"job":4
},
{
"id":3,
"username":"admin-3",
"age":18,
"job":5
}
],
"jobs":[
{
"id":1,
"name":"学生"
},
{
"id":2,
"name":"老师"
},
{
"id":3,
"name":"司机"
},
{
"id":4,
"name":"演员"
},
{
"id":5,
"name":"工程师"
},
{
"id":6,
"name":"程序员"
}
]
}
代码：
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="UTF-8"/>
<title>独秀不爱秀</title>
</head>
<body>
<formid="user-form"></form>
<scripttype="text/html"id="tpl">
<div>
<labelfor="">用户名</label>
<inputtype="text"value="{{user.username}}">
</div>
<div>
<labelfor="">年龄</label>
<inputtype="number"value="{{user.age}}">
</div>
<div>
<labelfor="">职业</label>
<selectname=""id="">
{{eachjobs}}
{{ifuser.job===$value.id}}
<optionvalue="{{$value.id}}"selected>{{$value.name}}</option>
{{else}}
<optionvalue="{{$value.id}}">{{$value.name}}</option>
{{/if}}
{{/each}}
</select>
</div>
</script>
<scriptsrc="node_modules/art-template/lib/template-web.js"></script>
<scriptsrc="node_modules/jquery/dist/jquery.js"></script>
<scripttype="text/javascript">
/**
*既可以实现callback获取
*也可以实现.then方式获取
*/
constpGet=(url,callback)=>{
returnnewPromise((resolve,reject)=>{
constxhr=newXMLHttpRequest();
xhr.onload=()=>{
resolve(JSON.parse(xhr.responseText));
callback&&callback(JSON.parse(xhr.responseText));
}
xhr.onerror=(error)=>reject(error);
xhr.open('get',url);
xhr.send();
});
};
letcurrentData={};
pGet('./data.json')
.then((data)=>{
currentData.user=data.users[0];
returndata.jobs;
})
.then((jobsData)=>{
currentData.jobs=jobsData;
lethtmlStr=template('tpl',currentData);
document.getElementById('user-form').innerHTML=htmlStr;
});
</script>
</body>
</html>
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56635.shtml
