Ajax 搭配 Promise 封装

最新推荐文章于 2024-05-23 11:18:33 发布

原创最新推荐文章于 2024-05-23 11:18:33 发布 · 3.9k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Ajax #Promise #异步处理 #封装

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了Ajax的异步通信优势，如无刷新、高性能，但也指出其对搜索引擎和安全的挑战。接着探讨了Promise对象在处理异步操作中的作用，阐述了Promise的三种状态转换。文章还对比了JavaScript原生和jQuery中Promise的使用，并给出了封装示例。

简述
- Ajax（Asynchronous JavaScript And XML）
- Promise
JavaScript
jQuery

简述

Ajax（Asynchronous JavaScript And XML）

是一种创建交互式网页应用的开发技术、改善用户体验，实现无刷新效果

优点：

无需插件支持
页面无刷新，异步通信，具有更快的响应能力，更好的用户体验
按需请求数据，减少冗余请求，提高性能

缺陷：

使浏览器的回退机制失效
对搜索引擎，SEO优化的支持不足
安全问题，暴露了与服务器交互的细节

依赖 XMLHttpRequest 对象实现

设置请求头

code	type
`application/x-www-form-urlencoded`	表单字符类型
`multiline/form-data`	表单类型
`application/json`	json 类型
`text/xml`

xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Promise

是es6中的一个异步处理对象，从它可以获取异步操作的消息

Promise对象代表一个异步操作，有三种状态：
- pending 进行中
- fulfilled 已成功
- rejected 已失败
对象的状态不受外界影响，一旦状态改变，就不会再变
Promise对象的状态改变，只有两种可能：
- pending => fulfilled
- pending => rejected

JavaScript

原生 ajax 和 Promise 封装

function getAjax(type, url, data) {

    return new Promise(function(resolve, reject) {

        var xhr = null
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open(type, url, true);

        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(xhr)
            }
        }

        if (type == 'GET') {
            xhr.send()
        } else {
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(formatParams(data));
        }

    })

    function formatParams(data) {
        var arr = [];
        for(var name in data){
            arr.push(name + '=' + data[name]);
        }
        return arr.join("&");
    }
}

jQuery

$.ajax 和 Promise 封装

function getAjax(type, url, data) {
    return new Promise(function(resolve, reject) {
        $.ajax({
            url: url,
            type: type,
            data: data,
            sussess: function(data) {
                resolve(data)
            },
            error: function(error) {
                reject(error)
            }
        })
    })
}

调用示例

var taskOne = getAjax('GET', 'http://localhost:8080/Test', {id: 5, sex: 'male'});
var taskTwo = getAjax('POST', 'http://localhost:8080/Test', {id: 5, sex: 'male'});

taskOne.then(function(data){
    console.log(data)
}, function(error){
    console.log(error.status)
})