1、传统的Ajax请求
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
xhr.onreadystatechange = function()
{
if (xhr.readyState === 4 && xhr.status === 200)
{
// coding
}
}
xhr.open("GET","xxx",true)
xhr.send()
当请求里面还需要请求,Ajax只能嵌套使用,这种嵌套回调会造成代码可读性非常差,不利于理解和维护
2、promise
Promise 通过 then 链来解决多层回调的问题。
深度理解promise中then方法的作用,请参考https://segmentfault.com/a/11...
// 用promise封装Ajax
var post = (url, params) {
return new Promise((resolve, reject) => {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
xhr.onreadystatechange = function()
{
if (xhr.readyState === 4 && xhr.status === 200)
{
// coding
resolve(xhr.responseText)
}
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.open("POST", url, true)
xhr.send(JSON.stringify(params))
})
}
// promise请求处理嵌套回调,形成链式回调
// 第一个then返回一个promise对象,第二个then接收第一个then返回promise对象的resolve值
post(url, params).then(res => post('xxx', res)).then(re =>{
console.log(re)
})
参考:
https://segmentfault.com/q/10...
3、async/await
async/await的出现是为了处理promise链式调用过长问题,async/await可以让我们同步书写请求嵌套,看完下面例子之后是不是觉得async/await处理嵌套回调请求更加方便
// 假设一种场景,现有一个A请求,然后B请求依赖A请求返回的数据,C请求依赖B请求返回的数据...
// promise
post('A', data)
.then(res1 => post('B', res1))
.then(res2 => post('C', res2))
.then(res3 => post('D', res3))
.then(res4 => post('E', res4))
...
// async/await
async handler() {
let a = await post('A', data)
let b = await post('B', a)
let c = await post('C', b)
let d = await post('D', c)
...
}
参考:
深度理解async/await:https://segmentfault.com/a/11...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。