前端交互模式
接口调用方式
URL地址格式
-
传统形式的URL
格式:schema://host:port/path?query#frahment- schema:协议。例如http、https、ftp等(必需)
- host:域名或者IP地址(必需)
- port:端口,http默认端口80,可以省略
- path:路径,例如/abc/a/b/c(虚拟路径,区分不同资源)
- query:查询参数,例如uname=tkrj&age=19
- fragment:锚点(哈希Hash),用于定位页面的某个位置
-
Restful形式的URL
与HTTP请求方式相关- GET 查询
- POST 添加
- PUT 修改
- DELETE 删除
Promise用法
异步调用
- 异步效果分析
- 定时任务
- Ajax
- 事件函数
- 多次异步调用的以来分析
- 多次异步调用的结果顺序不确定
- 异步调用结果如果存在依赖需要嵌套
Promise概述
Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息。
优点:
- 可以避免多层异步调用嵌套问题(回调地狱)
- Promise对象提供了简洁的API,使得控制异步操作更加容易
Promise基本用法
- 实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务
- resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果
var p = new Promise(function(resolve,reject){
//实现异步任务...
//成功时调用
resolve();
//失败时调用
reject();
});
p.then(function(ret){
//从resolve得到正常结果
},function(ret){
//从reject得到错误信息
});
基于Promise处理Ajax请求
- 处理原生Ajax
function queryData(url){
return new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState!=4) return;
if(xhr.status == 200){
resolve(xhr.responseText);
}else{
reject('出错了');
}
}
xhr.open('get',url);
xhr.send(null);
});
}
//调用
queryData('http://localhost:3000/data').then(
function (data) {
console.log(data);
},
function (data) {
console.log(data);
}
)
- 发送多次ajax请求(解决回调地狱)
queryData('http://localhost:3000/data')
.then(function (data) {
console.log(data);
//异常情况可以不处理
return queryData('http://localhost:3000/data1');
})
.then(function (data1) {
console.log(data1);
return queryData('http://localhost:3000/data2');
})
.then(function (data2) {
console.log(data2);
});
then参数中的函数返回值
- 返回Promise实例对象
- 返回的该实例对象会调用下一个then
- 返回普通值
- 返回的普通值会直接传递给下一个then,通过then参数中函数的参数接收该值
Promise常用的API
1.实例方法
* p.then()得到异步任务的正确结果
* p.catch()获取异常信息
* p.finally()成功与否都会执行(暂时还不是正式标准)
foo()
.then(function (data) {
console.log(data);
})
.catch(function (data) {
console.log(data);
})
.finally(function () {
console.log('finish');
})
也可以写为:
foo()
.then(function (data) {
console.log(data);
},
function (data) {
console.log(data);
})
.finally(function () {
console.log('finish');
})
2.对象方法
- Promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果
//p1,p2,p3为Promise实例对象任务
Promise.all([p1,p2,p3]).then((result)=>{
console.log(result);
})
- Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
Promise.race([p1,p2,p3]).then((result)=>{
console.log(result);
})