如何编写一个使用Promise实现自定义GET请求的函数示例？

本文共计1366个文字，预计阅读时间需要6分钟。

在先前页面+近期review自己之前的代码时，发现promise的使用方式和比较模糊。意义不明确，用法凌乱。这里重新温习一下基础知识。

前言：JavaScript是单线程工作，但浏览器是多线程的，因此JavaScript需要处理异步操作。

1. Promise的引入是为了解决异步操作中回调嵌套（回调地狱）的问题。

2. Promise的基本用法：

- 创建Promise：使用`new Promise(executor)`，executor函数接收两个参数：resolve和reject。当异步操作成功时调用resolve，当失败时调用reject。

- then方法：用于处理Promise成功时的回调函数。

- catch方法：用于处理Promise失败时的回调函数。

3. Promise的链式调用：

- 使用`.then()`方法可以将多个异步操作串联起来，实现异步操作的顺序执行。

- 当一个Promise被resolve时，会继续执行下一个`.then()`方法中的回调函数。

4. Promise的链式调用示例：

javascriptnew Promise((resolve, reject)=> { // 异步操作 resolve('数据');}).then(data=> { // 处理数据 console.log(data);}).then(()=> { // 下一个异步操作 return new Promise((resolve, reject)=> { resolve('更多数据'); });}).then(moreData=> { // 处理更多数据 console.log(moreData);});

通过以上基础知识的学习，相信你对Promise有了更清晰的认识。在实际开发中，合理运用Promise可以提高代码的可读性和可维护性。

写在最前面

近期 review 自己以前的代码的时候，看到 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.all

- 这个方法返回一个新的promise对象，该promise对象在iterable参数对象里所有的promise对象都成功的时候才会触发成功，一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后，会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值，顺序跟iterable的顺序保持一致；如果这个新的promise对象触发了失败状态，它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。

Promise.reject

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

return Promise.reject(error);

Promise.resolve

- 返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)，返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象),返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。通常而言，如果你不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象,这样就能将该value以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(); }); };

Demo: 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); })

Demo: 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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对自由互联的支持。