Promise 对象用于一个异步操作的最终结果（成功或失败）的表示。顾名思义，它代表一个承诺，一个对异步操作在未来产生的结果的假设（比如明天考试过了就去吃顿好的，挂了就去图书馆待一天）。
不用promise实现ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.output{
border: 1px solid black;
min-height: 100px;
}
</style>
</head>
<body>
<button id=myButton>AJAX to x</button>
<button id=myButton2>AJAX to y</button>
<div class="output" id="x"></div>
<div class="output" id="y"></div>
<script>
let myButton = document.querySelector('#myButton')
myButton.onclick = function(){
ajax({
method: 'GET',
success: function(responseText){
document.querySelector('#x').innerText = responseText
}
})
}
let myButton2 = document.querySelector('#myButton2')
myButton2.onclick = function(){
ajax({
method: 'GET',
url: '/y2',
success: function(responseText){
document.querySelector('#y').innerText = responseText
}
})
}
function commonErrorFn(status){
alert('请求失败，状态码为' + status)
}
function ajax(options){
let {method, url, success, error} = options
if(!method){ throw new Error('你神经病，怎么不传 method') }
url = url || location.href
let xhr = new XMLHttpRequest()
xhr.open(method, url)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status>=200 && xhr.status < 400){
success && success.call(null, xhr.responseText, xhr)
}else if(xhr.status >= 400){
error && error.call(null, xhr.status, xhr)
}
}
}
xhr.send()
}
</script>
</body>
</html>
用promise实现ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.output{
border: 1px solid black;
min-height: 100px;
}
</style>
</head>
<body>
<button id=myButton>AJAX to x</button>
<button id=myButton2>AJAX to y</button>
<div class="output" id="x"></div>
<div class="output" id="y"></div>
<script>
let myButton = document.querySelector('#myButton')
myButton.onclick = function(){
ajax({method: 'GET', url: '/x'}).then(SuccessFn1, commonErrorFn)
}
let myButton2 = document.querySelector('#myButton2')
myButton2.onclick = function(){
ajax({method: 'GET',url:'/y'}).then(SuccessFn2,commonErrorFn)
}
function SuccessFn1(responseText){
document.querySelector('#x').innerText = responseText }
function SuccessFn2(responseText){
document.querySelector('#y').innerText = responseText }
function commonErrorFn(xhr){
alert('请求失败，状态码为' + xhr.status)
}
function ajax(options){
return new Promise(function(resolve, reject){ // 1通知成功 通知失败（通知then)
let {method, url} = options
if(!method){ throw new Error('你神经病，怎么不传 method') }
url = url || location.href
let xhr = new XMLHttpRequest()
xhr.open(method, url)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status>=200 && xhr.status < 400){
resolve.call(null, xhr.responseText) // 2通知成功·
}else if(xhr.status >= 400){
reject.call(null, xhr) // 3通知失败
}
}
}
xhr.send()
})
}
</script>
</body>
</html>
网友评论