- Promise 對(duì)象
-
Promise 對(duì)象，是異步編程的一種解決方案，可以將異步操作以同步操作的流程表達(dá)出來，避免層層嵌套的回調(diào)函數(shù)。
-
Promise 實(shí)現(xiàn)了鏈?zhǔn)秸{(diào)用，也就是說每次調(diào)用 then 之后返回的都是一個(gè) Promise ，并且是一個(gè)全新的Promise ，原因也是因?yàn)闋顟B(tài)不可變。如果你在then中 使用了return，那么return的值會(huì)被 Promise.resolve()包裝
- Promise 使用
- 第一步：初始化一個(gè) promise 對(duì)象，有兩種方式創(chuàng)建
方式一： new Promise( callback )
方式二： Promise.resolve(callback)
- 第二步：調(diào)用第一步返回的 promise 對(duì)象的 then 方法，注冊回調(diào)函數(shù)
- then 中的回調(diào)函數(shù)可以有一個(gè)參數(shù)，也可以不帶參數(shù)。如果 then 中的回調(diào)函數(shù)依賴上一步的返回結(jié)果，那么要帶上參數(shù)。比如
new Promise( callback)
.then( callback(value){
// 處理value
} )
- 第三步，最后注冊 catch 異常處理函數(shù)，處理前面回調(diào)中可能拋出的異常。
new Promise( callback)
.then( callback(value) {
// 處理value
} )
.catch(err => {
console.log(err)
})
- Promise 對(duì)象簡析
const promise = new Promise( function(resolve,reject) {
// ...some code
if(success){ // success 即異步操作成功的條件
resolve(value)
}else {
reject(err)
}
})
-
Promise 對(duì)象接收一個(gè)函數(shù)作為參數(shù)，而該函數(shù)接收兩個(gè)函數(shù)(resolve 和 reject)作為參數(shù)，這兩個(gè)函數(shù)JavaScript 提供，自己不用部署
-
resolve：異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果作為參數(shù)傳遞出去
-
reject：異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤作為參數(shù)傳遞出去
- 使用 Promise 改寫 ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function ajax(opts) {
let promise = new Promise((resolve, reject) => {
let url = opts.url
let type = opts.type || "Get"
let dataType = opts.dataType || function () { }
let onerror = opts.onerror || function () { }
let data = opts.data || {}
let dataStr = []
for (let key in data) {
dataStr.push(key + '=' + data[key])
}
dataStr = dataStr.join('&')
if (type === "Get") {
url += "?" + dataStr
}
let xhr = new XMLHttpRequest()
xhr.open(type, url, true)
xhr.onload = function () {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
if (dataType === "json") {
let retJson = JSON.parse(xhr.responseText)
resolve(retJson) // 異步操作成功，調(diào)用 resolve函數(shù)
} else {
resolve(xhr.responseText)
}
} else {
reject() // 異步操作失敗，調(diào)用 reject 函數(shù)
}
}
xhr.onerror = onerror
if (type === "POST") {
xhr.send(dataStr)
} else {
xhr.send()
}
})
return promise
}
// 測試
ajax({
url: 'http://api.jirengu.com/getWeather.php',
data: {
city: '長沙'
}
}).then(function (ret) {
console.log(ret)
}).catch(function () {
console.log('服務(wù)器異常')
})
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
