• Promise封装Ajax请求


    Promise 封装 Ajax 请求的示例代码如下:

    1. function ajax(url, method, data) {
    2. return new Promise((resolve, reject) => {
    3. const xhr = new XMLHttpRequest();
    4. xhr.open(method, url);
    5. xhr.setRequestHeader('Content-Type', 'application/json');
    6. xhr.onreadystatechange = function () {
    7. if (this.readyState === 4) {
    8. if (this.status >= 200 && this.status < 300) {
    9. resolve(JSON.parse(this.responseText));
    10. } else {
    11. reject({
    12. status: this.status,
    13. statusText: xhr.statusText
    14. });
    15. }
    16. }
    17. };
    18. xhr.onerror = function () {
    19. reject({
    20. status: this.status,
    21. statusText: xhr.statusText
    22. });
    23. };
    24. xhr.send(JSON.stringify(data));
    25. });
    26. }

    调用方法:

    1. ajax('/api/test', 'POST', {foo: 'bar'})
    2. .then(data => console.log(data))
    3. .catch(error => console.error(error));

    以上代码的含义是:发送一个 POST 请求到 URL /api/test,数据为 {foo: 'bar'},返回一个 Promise 对象,使用 then 方法处理成功的回调函数,使用 catch 方法处理失败的回调函数。

    Promise是JavaScript中一种非常常用的异步编程解决方案。它可以非常方便地处理异步操作,避免了回调函数的嵌套过多而导致代码难以维护的问题。

    Promise的主要作用是将异步操作封装成一个对象,通过then方法向外界提供成功和失败的回调函数,使得异步操作的结果可以通过回调函数进行处理。简单来说,Promise的作用就是让异步操作变得像同步操作一样,更加易于理解和编写。

    下面是一个简单的Promise封装示例:

    1. function getData(url) {
    2. return new Promise(function(resolve, reject) {
    3. var xhr = new XMLHttpRequest();
    4. xhr.open('GET', url);
    5. xhr.onreadystatechange = function() {
    6. if(xhr.readyState === 4) {
    7. if(xhr.status >= 200 && xhr.status < 300) {
    8. resolve(xhr.responseText);
    9. } else {
    10. reject(new Error(xhr.statusText));
    11. }
    12. }
    13. };
    14. xhr.onerror = function() {
    15. reject(new Error('Network Error'));
    16. };
    17. xhr.send();
    18. });
    19. }
    20. // 使用方式
    21. getData('https://example.com/api/data')
    22. .then(function(data) {
    23. console.log(data);
    24. })
    25. .catch(function(error) {
    26. console.log(error);
    27. });

    在这个例子中,我们封装了一个名为getData的函数,该函数接收一个URL参数,返回一个Promise对象。我们使用XMLHttpRequest对象发送一个GET请求,当请求完成时,根据请求的状态码来决定resolve还是reject Promise。如果请求成功,我们将返回响应文本;如果请求失败,则返回一个Error对象。

    使用时,我们可以通过then方法来注册成功的回调函数,catch方法来注册失败的回调函数。这样,无论getData函数返回的Promise对象是成功还是失败,我们都可以方便地处理它的结果。

  • 相关阅读:
    再学二分查找
    Qt实现最小化窗口到托盘图标
    Mac配置iTerm2、Git等
    程序设计:C++ UNIX/Linux 目录操作(源码)
    Java代理
    web网页设计期末课程大作业:旅游网页主题网站设计——中国风的温泉酒店预订网(13页)HTML+CSS+JavaScript
    家用AIO系统架构图(Openwrt 群晖 IPV6 DDNS)
    Numpy解决找出二维随机矩阵中每行数据中最接近某个数字的数字
    积分商城运营成功的7个关键要素
    计算机毕业设计springboot+vue基本微信小程序的学生作业管理小程序 uniapp
  • 原文地址:https://blog.csdn.net/qingdouxiaohua/article/details/134093975