JavaScript 中利用 Promise 封装 GET 请求与异步操作详解

作者：代码拾荒时间：2026-10-23 05:47:15浏览：463

本文深入解析 JavaScript 中 Promise 的核心概念与用法，涵盖构造函数、then 方法及 Promise.all、resolve、reject 等静态方法。通过具体代码示例，演示如何基于 XMLHttpRequest 封装通用的 GET 请求函数及图片加载异步处理，帮助开发者掌握异步操作的标准实践。

Promise 基础概念与语法

前言说明

在近期回顾过往代码时，发现对 Promise 的应用存在理解模糊、概念不清及用法混乱的情况，因此有必要重新梳理并复习相关基础知识。

背景介绍

JavaScript 运行环境为单线程，而浏览器具备多线程能力。为了更有效地执行程序任务，异步操作的 Promise 机制应运而生。

Promise 是一个对象，用于表示异步操作的最终完成或失败结果。

具体使用方法

语法规范

基础用法


new Promise( function(resolve, reject) {...} /* executor */ );

Promise 构造函数接收一个执行器函数作为参数，该函数包含 resolve（解析）和 reject（拒绝）两个回调参数。在回调中执行异步操作，若一切正常则调用 resolve，否则调用 reject。

then 方法的应用


promise.then(function(result) {
 console.log(result); // "Stuff worked!"
}, function(err) {
 console.log(err); // Error:"It broke"
});

then() 方法接受两个可选参数：分别用于处理成功和失败的回调。开发者可以根据需要只添加其中一个回调。

Promise 静态方法详解

Promise 的三个主要静态方法

Promise.all

该方法返回一个新的 Promise 对象。仅当 iterable 参数中的所有 Promise 对象都成功时，新对象才会触发成功状态，并将包含所有 Promise 返回值的数组（顺序与输入一致）作为成功回调的返回值。若其中任意一个 Promise 失败，新对象将立即触发失败状态，并将第一个失败 Promise 的错误信息作为失败回调的参数。此方法常用于处理多个 Promise 的状态集合。

Promise.reject

该方法返回一个状态为失败的 Promise 对象，并将给定的失败信息传递给相应的处理方法。

return Promise.reject(error);

Promise.resolve

该方法返回一个状态由给定 value 决定的 Promise 对象。若 value 是 thenable（即带有 then 方法的对象），返回的 Promise 最终状态由 then 方法执行结果决定；否则（value 为空、基本类型或无 then 方法的对象），返回的 Promise 状态为 fulfilled，并将 value 传递给 then 方法。通常，当不确定一个值是否为 Promise 对象时，使用 Promise.resolve(value) 可将其转换为 Promise 对象以便使用。

Promise 创建与异步请求封装

如何创建 Promise

Promise 对象通过关键字 new 及其构造函数创建。


const myFirstPromise = new Promise((resolve, reject) => {
 // ?做一些异步操作，最终会调用下面两者之一:
 //
 // resolve(someValue); // fulfilled
 // ?或
 // reject("failure reason"); // rejected
});

若希望某个函数具备 Promise 功能，只需使其返回一个 Promise 对象即可。


function myAsyncFunction(url) {
 return new Promise((resolve, reject) => {
 const xhr = new XMLHttpRequest();
 xhr.open("GET", url);
 xhr.onload = () => resolve(xhr.responseText);
 xhr.onerror = () => reject(xhr.statusText);
 xhr.send();
 });
};

示例 1：创建一个简单的 GET 请求函数


function get(url) {
 // 返回一个 promise 对象.
 return new Promise(function(resolve, reject) {
 // 创建一个 XML 对象
 var req = new XMLHttpRequest();
 req.open('GET', url);

 req.onload = function() {
  
  if (req.status == 200) {
  // 请求 200的时候处理 response 
  resolve(req.response);
  }
  else {
  // 处理请求错误信息
  reject(Error(req.statusText));
  }
 };

 // 处理网络错误信息
 req.onerror = function() {
  reject(Error("Network Error"));
 };

 // 发送请求
 req.send();
 });
}

异步操作实战示例

接下来进行实际编码演示。


get('story.json').then(function(response) {
 console.log("Success!", response);
}, function(error) {
 console.error("Failed!", error);
})

示例 2：创建一个图片上传的 Promise 函数


function imgLoad(url) {
 //创建一个图片上传的 Promise() constructor;
 return new Promise(function(resolve, reject) {
  
  var request = new XMLHttpRequest();
  request.open('GET', url);
  request.responseType = 'blob';
  
  request.onload = function() {
  if (request.status === 200) {
  
   resolve(request.response);
  } else {
  
   reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
  }
  };
  request.onerror = function() {
  
   reject(Error('There was a network error.'));
  };
  
  request.send();
 });
 }

 // 挂载到 body 上面去
 var body = document.querySelector('body');
 var myImage = new Image();
 
 // 使用
 imgLoad('myLittleVader.jpg').then(function(response) {
 
 //第一步 处理 resolve() method.
 var imageURL = window.URL.createObjectURL(response);
 myImage.src = imageURL;
 body.appendChild(myImage);
 
 }, function(Error) {
 
 // 处理错误
 console.log(Error);
 });

后续文章预告

主要内容涉及 Promise 与错误处理的详细解析，以及 JavaScript 异步机制与 Promise 的深入探讨。

参考资料

MDN-Promise
Google-Develop

总结

以上为本文的全部内容，希望这些内容对您的学习或工作具有参考价值，感谢支持。

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00