前后端交互之promise

前后端交互模式

1.url地址格式

传统的url：
格式： sehema://host:port/path?query#fragment
1）schema：协议，如http，https，ftp等
2）host：域名或ip地址
3）port：端口号
4）path：路径，定位资源
5）query：查询参数
6）fragment：锚点（哈希Hash），用于定位页面的某个位置

restful风格的url
HTTP请求方式：
1）GET 查询
2）POST 添加
3）PUT 修改
4）DELETE 删除
5）参数通过url地址传递

promise用法

异步效果分析：

定时任务
ajax
事件函数

多次异步调用的依赖分析：

异步调用结果只能在success使用
多次异步调用返回顺序不一定对应
可使用嵌套确定异步调用顺序

promise概述：

promise是异步编程的一种解决方案，从语法上讲promise是一个对象，从他可以获取异步操作的消息

console.dir(Promise)查看Promise信息，其中，all和race还有prototype中catch和then都是是Promise的api，

Promise用法：

实例化Promise对象，构造函数中传函数，在函数中处理异步任务
resilve和reject两个参数用于处理成功和失败两种情况，并通过p.then返回处理结果

例：
//
var p=new Promise(function(resolve,reject){
//这里实现异步任务，模拟
setTimeout(function(){
var flag=false;
if(flag){
resolve(‘hello’);
}else{
reject(‘出错了’);
}
},100);

});
p.then(function(data){
	//调用正常时resolve
	console.log(data);
},function(info){
	//调用异常时，
	console.log(info);
});

p.then(function(data){
//调用正常时
conssole.log(data);
}).catch(unction(data){
//调用正常时reject
conssole.log(data);
}).finally(unction(data){
//都会执行

})

Promise的then方法中return poremise对象，可以继续进行链式调用，reture普通值，会创建一个默认Promise对象，通值作为data传递
p.then(function(data){
//调用正常时
conssole.log(data);
return p;
}).then(function(data){
//调用正常时
conssole.log(data);
return p;
}).then(function(data){
//调用正常时
conssole.log(data);
return p;
});

接口调用fetch

fetch基于Promise实现

get请求语法：
fetch（url）.then(data=>{
//这里返回的是promise对象
return data.text();
}).then(ret=>{
//操作Promise对象
console.log(ret);
})

Post请求语法
fetch(url,{
method:‘POST’,
//参数
body:‘name=lisi&pwd=123’,
//请求头，必须设置
headers:{
‘Content-Type’:‘application/x-www-form-urlencoded’,
}
}).then(data=>{
//这里返回的是字符串类型，return返回默认创建promise对象，并以此字符串为参数
return data.text();
}).then(ret=>{
//操作Promise对象
console.log(ret);
})

Post请求传递json字符串语法(put请求类似)
fetch(url,{
method:‘POST’,
//参数
body:JSON.stringify({
name:‘lisi’,
age:123
}),
//请求头，必须设置
headers:{
‘Content-Type’:‘application/json’,
}
}).then(data=>{
//这里返回的是promise对象
return data.text();
}).then(ret=>{
//操作Promise对象
console.log(ret);
})

fetch的响应结果

text() 将返回体处理成字符串类型
json() 返回结果为JSON.parse(responseText)一样