用Promise对象实现的 Ajax

简介: 用Promise对象实现的 Ajax
const getJSON = function(url) {
    const promise = new Promise(function(resolve, reject) {
        const handler = function() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status === 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
            }
        };
        const client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    });
    return promise;
};
getJSON("/posts.json").then(function(json) {
    console.log('Contents: ' + json);
}, function(error) {
    console.error('出错了', error);
});

上面代码中,getJSON是对 XMLHttpRequest 对象的封装,用于发出一个针对 JSON 数据的 HTTP 请求,并且返回一个Promise对象。需要注意的是,在getJSON内部,resolve函数和reject函数调用时,都带有参数。

相关文章
|
7月前
|
设计模式 前端开发 JavaScript
|
5月前
|
前端开发 安全
协程问题之协程函数返回的Promise对象必须满足哪些要求
协程问题之协程函数返回的Promise对象必须满足哪些要求
|
5月前
|
前端开发 JavaScript
ES6 中 Promise对象使用学习
ES6 中 Promise对象使用学习
42 1
|
7月前
|
前端开发 JavaScript API
Promise 对象与 Promises/A+ 规范
Promise 对象与 Promises/A+ 规范
104 0
|
7月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
68 3
|
7月前
|
前端开发 JavaScript 数据处理
JavaScript中的异步编程及Promise对象
【2月更文挑战第3天】 传统的JavaScript编程模式在处理异步任务时常常会导致回调地狱和代码可读性较差的问题,而Promise对象的引入为解决这一问题提供了一种优雅的解决方案。本文将介绍JavaScript中的异步编程方式以及Promise对象的使用方法和优势,帮助读者更好地理解和运用异步编程技术。
53 8
|
7月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象
|
7月前
|
前端开发 算法
2723. 两个 Promise 对象相加
2723. 两个 Promise 对象相加
45 0
|
7月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象
|
7月前
|
XML JSON 前端开发
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
76 0