jquery中ajax的几种方法如下:
// 方案1
var ajax = $.ajax({
url: './1.json',
success: function() {
console.log(1);
console.log(2);
console.log(3);
},
error: function() {
console.log('err')
}
})
// 方案2
var ajax = $.ajax('./1.json');
ajax.done(function() {
console.log('done1')
}).fail(function() {
console.log('fail1')
}).done(function() {
console.log('done2')
}).fail(function() {
console.log('fail1')
}).done(function() {
console.log('done3')
}).fail(function() {
console.log('fail1')
})
// 方案3
var ajax = $.ajax('./1.json');
ajax.then(function() {
console.log('then1')
}, function() {
console.log('catch1')
}).then(function() {
console.log('then2')
}, function() {
console.log('catch1')
}).then(function() {
console.log('then3')
}, function() {
console.log('catch1')
})
jquery中的promise雏形: Deferred
以上都是靠Deferred实现的。那么deferred到底是个什么东西呢?如何考deferred来结局异步呢?
- 声明一个函数
- 声明一个$.deferred实例
- 声明一个wait函数,传入dtd,对dtd进行操作
- 把dtdreturn出来
具体代码如下:
var waitHandle = function() {
var dtd = $.Deferred();
var wait = function(dtd) {
setTimeout(function() {
console.log('执行完成')
dtd.resolve() //执行成功的回调
dtd.reject() //执行失败的回调
}, 1000)
}
return dtd.promise()
}
var w = waitHandle()
$.when(w).then(function() {
//执行成功的函数
}, function() {
//执行失败的回调函数
})
注意点:
- promise和deferred的区别是: promise把resolve和reject在函数外部过滤了。
- dtd.resolve 和dtd.reject() 同时只能执行1个
规范化: promise
基本语法
function loadImg(src) {
const promise = new Promise((resolve, reject) => {
var img = document.createElement('img')
img.onload = function() {
resolve(img)
}
img.onerror = function() {
reject()
}
img.src = src
})
return promise
}
var src = "xxx"
var result = loadImg(src)
result.then(function(img) {
console.log(img.width)
}, function() {
console.log("faild")
})
result.then(function(img) {
console.log("height")
})
异步语法
result.then(function() {
//代码
}).then(function() {
//代码
}).catch(function(ex) {
//统一处理错误
console.log(ex)
})
串联运行
加入有两个ajax请求,一个请求要在另外一个请求之后执行应该怎么处理?
在第一个要执行的promise里面返回第二个promise。
代码如下:
function loadImg(src) {
const promise = new Promise((resolve, reject) => {
var img = document.createElement('img')
img.onload = function() {
resolve(img)
}
img.onerroe = function() {
reject()
}
img.src = src
})
return promise
}
//调用promise函数
var src1 = "...png"
var result1 = loadImg(src1)
var src2 = "...jpg"
var result2 = loadImg(src2)
result1.then(function() {
//result1的回调函数
console.log('图片1执行成功')
return result2
}).then(function() {
//result2的回调函数
console.log('图片2执行成功')
}).catch() {
console.log('error')
}
promise.all && promise.race
- promise.all 和 promise.race 都接受一个promise的数组
- all 是所有的promise都执行完了才then
- race 是只要有一个promise执行完成了就执行then
- all 返回一个datas的数组,是所有promise返回的集合
- race 返回data是第一个执行的Promise的结果
代码如下:
Promise.all([ promise1, promise2]).then(function(datas) {
console.log(datas[1])
console.log(datas[2])
})
Promise.race([promise1, promise2]).then((data) => {
console.log(data)
})
promise标准
任何技术推广都需要一套标准来支撑
promise的状态
- pending 初始状态
- fulfilled 成功状态
- rejected 失败状态
promise的then
- 必须执行
- 接受两个参数
- 返回的必须是一个promise实例
- 如果没有返回值,返回的就是promise本身的实例