前后端交互模式
接口调用方式
传统形式的URL
Restful形式的URL
前后端的交互模式主要是:前端通过ajax调用一个url地址,后台通过这个地址返回对应的数据,前端进行数据的渲染。
异步调用
异步效果分析:
- 定时任务
- Ajax
- 事件函数
多次异步调用的依赖分析
因为Ajax属于异步编程,所以它得到的结果的顺序是不确定的,所以如果要想得到有顺序的返回结果就需要嵌套。但是如果一直往里面嵌套就会很复杂,一环套一环,这时这种现象,我们可以叫做回调地狱。
通过回调函数一直往里嵌套,这种叫做 回调地狱
Promise
Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象(也是一个函数),从它可以获取异步操作的消息。
好处:可以避免多层异步调用嵌套问题(回调地狱)
Promise对象提供了简洁的API,使得控制异步操作更加容易
Promise基本用法:
实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果
var p = new Promise(function (resolve, reject) {
//这里用于实现异步任务
setTimeout(function () {
var flag = false;
if (flag) {
//正常情况
resolve('hello');
} else {
//异常情况
reject('error');
}
}, 100);
});
p.then(function (data) {
console.log(data);
}, function (info) {
console.log(info);
});
基于Promise处理Ajax请求
发送多次ajax请求
回调地狱
这种写法 代替回调地狱
then参数中的函数返回值
- 返回Promise实例对象
- 返回普通值
promise常用的API
- 实例方法
function foo () {
return new Promise(function (resolve, reject){
setTimeout(function() {
// resolve(123);
reject(234);
}, 100);
})
}
foo()
.then(function(data){
console.log(data);
})
.catch(function(data){
console.log(data);
})
.finally(function(){
console.log('finally');
})
- 对象方法
fetch方法是基于Promise对象的(调用接口方法)
基本特性
更加简单的数据获取方式,功能更强大,更灵活,可以看做是xhr(ajax)的升级版
基于Promise实现
语法结构
text()是fetch API中的一部分,它返回的是一个Promise对实例象,用于获取后台返回的数据,需要通过下一个then得到数据
fetch请求参数
delete请求方式的参数传递
post请求方式的参数传递
put请求方式的参数传递
一般用于修改数据
响应数据格式
text(): 将返回体处理成字符串类型
json():将返回结果和JSON.parse(responseText)一样