- Promise 对象
-
Promise 对象，是异步编程的一种解决方案，可以将异步操作以同步操作的流程表达出来，避免层层嵌套的回调函数。
-
Promise 实现了链式调用，也就是说每次调用 then 之后返回的都是一个 Promise ，并且是一个全新的Promise ，原因也是因为状态不可变。如果你在then中 使用了return，那么return的值会被 Promise.resolve()包装
- Promise 使用
- 第一步：初始化一个 promise 对象，有两种方式创建
方式一： new Promise( callback )
方式二： Promise.resolve(callback)
- 第二步：调用第一步返回的 promise 对象的 then 方法，注册回调函数
- then 中的回调函数可以有一个参数，也可以不带参数。如果 then 中的回调函数依赖上一步的返回结果，那么要带上参数。比如
new Promise( callback)
.then( callback(value){
// 处理value
} )
- 第三步，最后注册 catch 异常处理函数，处理前面回调中可能抛出的异常。
new Promise( callback)
.then( callback(value) {
// 处理value
} )
.catch(err => {
console.log(err)
})
- Promise 对象简析
const promise = new Promise( function(resolve,reject) {
// ...some code
if(success){ // success 即异步操作成功的条件
resolve(value)
}else {
reject(err)
}
})
-
Promise 对象接收一个函数作为参数，而该函数接收两个函数(resolve 和 reject)作为参数，这两个函数JavaScript 提供，自己不用部署
-
resolve：异步操作成功时调用，并将异步操作的结果作为参数传递出去
-
reject：异步操作失败时调用，并将异步操作报出的错误作为参数传递出去
- 使用 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) // 异步操作成功，调用 resolve函数
} else {
resolve(xhr.responseText)
}
} else {
reject() // 异步操作失败，调用 reject 函数
}
}
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('服务器异常')
})
</script>
</body>
</html>
网友评论