Promise
我们可以利用Promise对Ajax请求进行简单的封装处理，那么下面就是我所实现的代码
首先新建一个index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Promise</h2>
</body>
<script src="./ajax.js"></script>
<script>
let url=‘这里可以写你请求的api‘
ajax(url,‘GET‘)
//通常成功返回的处理
.then(res=>{
console.log(‘获取数据：：‘,res)
})
//失败处理
.catch(error=>{
console.log(‘失败的处理‘,error)
})
.finally(res=>{
console.log(‘数据请求完毕！‘)
})然后我们新建一个ajax.js用来写我们的promise封装，并引入到我们的index.html页面里面
//使用promise封装原生的ajax请求
function ajax(url, method=‘get‘, data) {
return new Promise((resolve, reject) => {
//创建ajax对象
if (window.XMLHttpRequest) {
//w3c标准
var xhr = new XMLHttpRequest();
} else {
//兼容IE低版本
var xhr = new ActiveXObject(‘microsoft.XMLHttp‘)
}
//open
if (method === ‘GET‘) {
xhr.open(method,url)
}
if (method === ‘post‘) {
xhr.setRequestHeader(‘content-type‘,‘application/x-form-www-urlencdoed‘)
xhr.open(method,url)
}
//send
xhr.send();
//监听请求，状态处理
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//成功返回
resolve(JSON.parse(xhr.responseText))
} else {
//失败处理
reject(‘请求有误‘)
}
}
}
});
}这样呢在我们html页面就可以使用ajax请求我们的api，并且可以在.then方法处理我们拿到的数据，当然，我这里只是简单的模拟一下，真实的项目中比这要麻烦，而且我们请求的api也很多，我们也可以把我们所有api封装成方法引入，这样也方便我们后期维护，在这里我就不进行封装了，感兴趣的小伙伴可以自己尝试一下
相关推荐
88254251 2020-11-01
MarukoMa 2020-09-02
88234852 2020-09-15
陈旭阳 2020-08-31
whynotgonow 2020-08-19
前端开发Kingcean 2020-07-30
whynotgonow 2020-07-29
bowean 2020-07-08
前端开发Kingcean 2020-07-08
88520191 2020-07-05
前端开发Kingcean 2020-06-27
88481456 2020-06-18
whynotgonow 2020-06-16
88520191 2020-06-13
88520191 2020-06-13
89500297 2020-06-13