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封装成方法引入，这样也方便我们后期维护，在这里我就不进行封装了，感兴趣的小伙伴可以自己尝试一下

Promise

我们可以利用Promise对Ajax请求进行简单的封装处理，那么下面就是我所实现的代码

相关推荐