github 同步
1. 定义
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
为什么要重新从定义回顾,是因为我觉得就是因为定义太过于简单,所以细节容易被忽略.
比如怎么才算最终的状态?怎么更好的处理异常?如何兼容多个浏览器?
希望下面的介绍可以让你有所收获!
2. 基础用法
const timeDefer = milliseconds => new Promise(resolve => {
setTimeout(() => {
resolve()
}, milliseconds)
}
)
这是一个简单的用法,可以用来模拟异步请求.
假设用在类似 React 的组件中,异步请求回来后需要 render 部分 UI,我们经常会在回调里写类似
this.renderTable(response)
处理逻辑.
那么让我们检测下吧.
const timeDefer = milliseconds => new Promise(resolve => {
console.log(this)
setTimeout(() => {
resolve()
}, milliseconds)
}
)
timeDefer(1000).then(() => console.log('success'))
//undefined
//success
糟糕,在 scope 内拿不到 this.
你也许会说你由于箭头函数的问题,好,我们换为 ES5.
var hanlder = {
method: function(milliseconds) {
return function(resolve) {
console.log(this)
setTimeout(function(){
resolve()
}, milliseconds)
}
}
}
function timeDefer(milliseconds) {
return new Promise(hanlder.method(milliseconds))
}
timeDefer(1000).then(() => console.log('success'))
//undefined
//success
依然没有获取到,所以,这必须和箭头函数无关.
注意:我的运行环境为webpack编译后的runtime上下文内.
再换一种思路试试吧.
<script>
const timeDefer = milliseconds => new Promise(resolve => {
console.log(this)
setTimeout(() => {
resolve()
}, milliseconds)
}
)
timeDefer(1000).then(() => console.log('success'))
</script>
//window
//success
如上,我直接写在了页面里,结果是你想的吗?
很惊奇吧!没错,Promise 回调内的 this 是和上下文有关系的,不一定具体是什么,但应该是 global
3. 简单请求:fetch
我们经常会用一些 fetch 的库,如 whatwg-fetch,其实 fetch 就是基于 Promise 的一种实现,而许多浏览器也支持原生的 fetch,如 Chrome; 同样的,像 IE 这种非主流当然肯定是不支持的,所以这些库往往会帮我们去做 polyfill.
fetch 请求资源的用法如下:
const getJSON = url => fetch(url)
.then(response => response.json())
getJSON('/data.json')
.then(json => console.log('success1', json))
.catch(error => console.log('failed0'))
这里唯一需要注意的一点就是 response.json(),它返回的是一个 Promise 对象,请切记这一点.
对于 Promise 后面跟的链式 thenable 函数,一般有两种写法,上述等同于
getJSON('/data.json')
.then((response, error) => {
//do something
})
第一首较第二种来说更加直观清晰,所以大多数情况下都比较推荐第一种.
但第一种的写法有一些规则需要注意:
1. 如果 then 后面接 then,不管有多少个,只要请求是成功的,都会依次进入
getJSON('/data.json')
.then(json => console.log('success1', json))
.then(json => console.log('success1', json))
.catch(error => console.log('failed0'))
//success1
//success1
2. 如果 catch 放在 then 后面并且请求失败了,那么 then 还是会进去
getJSON('/data.json')
.catch(error => console.log('failed0'))
.then(json => console.log('success1', json))
//failed0
//success, undefined
这种情况最容易犯错,而且还不易排查,确保你的异常处理作为链式收尾.
3. 服务器返回 404
对于这个 case,希望你可以先自己猜猜,在看输出.
const getJSON = url => fetch(url)
.then(response => {
console.log('success0', response)
return response.json()
})
.then(json => {
console.log('success1', json)
})
.catch(error => {
console.log('failed0')
})
getJSON('/data1.json')//无效url,404
//success: 0
//failed0
你没有看错,对于 fetch(尤其是使用原生)来说,404 是'成功'的请求,并不会直接进 catch.
类似的问题许多库的 issue 里都提到:
Why both of then and catch are invoked when reponse status is 404
因此正确的处理应该是:
const getJSON = url => fetch(url)
.then(response => {
if (response.status === 200) {
console.log('success0', response)
return response.json()
}
})
.then(json => {
console.log('success1', json)
})
.catch(error => {
console.log(error, 'failed0')
})
4. 高级用法:链式
Promise 最大的作用就是解决了地狱回掉,并且给异步方法提供了优美的语法糖.
链式基本写法:
const success = () => Promise.resolve({data: {}})
const failed = () => Promise.reject({error: {}})
success()
.then(response => console.log(response))
.catch(error => console.log(error))
success()
.then((response, error) => {
console.log(response, error)
})
Promise.resolve 和 Promise.reject 分别返回一个已经成功 / 失败的 promise 对象,我在此用来模拟成功 / 失败的请求.
基于上面的回顾,几个小 demo 可以用来检测下自己对链式的掌握:
Demo1:
success('success0')
.then(response => console.log(response))
.then(response => console.log(response))
.then(response => console.log(response))
.then(response => console.log(response))
//success
//undefined
//undefined
//undefined
这个应该很好理解,我在上面已经提到了 then 的传递性
Demo2:
success('0')
.then(response => {
console.log('failed', response)
failed(response)
})
.catch(error => {
console.log('recovery', error)
return success(error)
})
.then((response, error) => console.log(response, error))
// failed 0
// undefined, undefined
这个结果是不让你懵逼了,如果是,那么先看下个例子.
success('0')
.then(response => {
console.log('failed', response)
return failed(response)
})
.catch(error => {
console.log('recovery', error)
return success(error)
})
.then((response, error) => console.log(response, error))
// failed 0
// recovery 0
// 0 undefined
没错,差别就在于一个 return,也许你一个小的手误就会导致一个大 bug.
所以切记:如果在 Promise 的回掉逻辑里依然是是 Promise,且希望有链式的后续处理,记得一定要返回该实例.
有了上面的基本知识,我们用最后一个 Demo 来结束本文:
Demo3:
const getJSON = url => fetch(url)
.then(response => response.json())//.json() will return a promise
.catch(error => console.log(error))
假设
getJSON('/data.json')
会返回一个形如:
{
urls: [
'file1.md',
'file2.md',
'file3.md',
...
'file12.md'
]
}
的 json 对象,包含接下来需要请求的资源.
我们在回调里的实现方式如下:
getJSON('/data.json')
.then(data => {
data.urls.forEach(url => {
getJSON(url)
});
})
getJSON('/data.json')
.then(data => {
let thenableRequest = Promise.resolve();
data.urls.forEach(url => {
thenableRequest.then(() => getJSON(url))
});
})
getJSON('/data.json')
.then(data => {
let thenableRequest = Promise.resolve();
data.urls.forEach(url => {
thenableRequest = thenableRequest.then(() => getJSON(url))
});
})
等同于
getJSON('/data.json')
.then(data => {
data.urls.reduce(
(thenable, url) => thenable.then(() => getJSON(url)),
Promise.resolve()
)
})
如果你能一口气说出其中的区别,或者告诉我 Network 中资源请求的顺序,那么请忽略本文.
第一种:
并行请求 ,但不能保证顺序,所以结果不可预期,如果这不是请求资源,而是数个有依赖顺序的 API,那结果肯定不能满足你.
第二种:
其实和第一种没有太大区别,只是稍微用链式重构了下,但实质并没有变.
第三种:
getJSON 每次都会返回一个新的 Promise 对象,你可以将其看作是 reduce 的结果,这种链式最终的结果是串行请求所有资源,即先 file1.md, file2.md, ... file12.md,如果用 Network 去查看,可以发现它是依次请求的,保证的顺序.
这三种方法其实就在解决一个问题,而也就是为什么有 Promise.all 的原因了.
Promise.all 既做保证了顺序也做了异常处理:所有的请求都成功了才能拿到最终结果,否者则会 reject.
利用 Promise.all 改写如下:
getJSON('/data.json')
.then(data => Promise.all(data.urls.map(url => getJSON(url))))
.then(responseArray => console.log('responseArray', responseArray))
来源: http://www.jianshu.com/p/62e6bfb5c978