023_Promise-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122900283

本文介绍了URL地址的组成部分，包括协议、域名、端口、路径、查询参数和锚点。接着讲解了HTTP请求的常见方法：GET、POST、PUT和DELETE。重点探讨了Promise在异步编程中的应用，包括基本概念、用法、处理原生Ajax请求的方式，以及Promise.all()和Promise.race()用于并发处理异步任务的方法。最后，通过示例展示了Promise在实际项目中的运用，包括创建HTML页面发送Ajax请求，并利用then、catch和finally处理回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. URL地址格式: schema://host:port/path?query#fragment

1.1. schema: 协议。例如: http、https、ftp等。

1.2. host: 域名或者IP地址。

1.3. port: 端口, http默认端口80, 可以省略。

1.4. path: 路径, 例如: /project/login。

1.5. query: 查询参数, 例如: uname=lisi&pwd=123。

1.6. fragment: 锚点(哈希Hash), 用于定位页面的某个位置。

2. http请求方式

2.1. get

2.2. post

2.3. put

2.4. delete

3. Promise概述

3.1. Promise是异步编程的一种解决方案, 从它可以获取异步操作的消息。Promise是ES6中的一个对象。

3.2. Promise对象提供了简洁的API, 使得控制异步操作更加容易。

4. Promise基本用法

4.1. 实例化Promise对象, 构造函数中传递函数, 该函数中用于处理异步任务。

4.2. resolve和reject两个参数用于处理成功和失败两种情况, 并通过p.then获取处理结果。

var p = new Promise(function(resolve, reject){
    // 正常情况 resolve('成功了');
          					
    // 异常情况 reject('出错了');	       		
});

p.then(function(data){
	// 正常情况进入这个回调函数
}, function(error){
	// 异常情况进入这个回调函数
});

5. Promise处理原生的Ajax请求

function queryData(url){
	var p = new Promise(function(resolve, reject){
			var xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function(){
				if(xhr.readyState != 4) return;
				 
				if(xhr.readyState == 4 && xhr.status == 200){
				// 处理正常的情况
				resolve(xhr.responseText);
				}else{
				// 处理异常情况
				reject('服务器错误');
				}
			};
		xhr.open('get', url);
		xhr.send(null);
	});

	return p;
}

5. then参数中的函数返回值

5.1. 返回Promise实例对象, 该实例对象会调用下一个then。

5.2. 返回普通值, 该值会传递给下一个then, 通过下一个then参数中的函数接收该值。

6. then()、catch()和finally()函数

6.1. p.then()得到异步任务的正确结果。

6.2. p.catch()获取异常信息。

6.3. p.finally()成功或失败都会执行的函数。

queryData().then(function(data){
	
}).catch(function(error){
	
}).finally(function(){
	
});

7. Promise多任务处理

7.1. Promise.all()并发处理多个异步任务, 所有任务都执行完成才能得到结果。

Promise.all([t1, t2, t3]).then((result) => {
	console.log(result);
});

7.2. Promise.race()并发处理多个异步任务, 只要有一个任务完成就能得到结果。

Promise.race([t1, t2, t3]).then((result) => {
	console.log(result);
});

8. 新建一个名为Promise的动态Web工程

8.1. 编写Promise.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Promise基本使用</title>
	</head>
	<body>
		<script type="text/javascript">
			var p = new Promise(function(resolve, reject){
      			// 这里用于实现异步任务
      			setTimeout(function(){
        			var flag = true;
        			if(flag){
          				// 正常情况
          				resolve('成功了');
        			}else{
          				// 异常情况
          				reject('出错了');
        			}
      			}, 100);
    		});

    		p.then(function(data){
    			// 正常情况进入这个回调函数
    			document.write("正常情况: " + data + "<br />");
    		}, function(error){
    			// 异常情况进入这个回调函数
    			document.write("异常情况: " + error + "<br />");
    		});
		</script>
	</body>
</html>

8.2. 运行项目, 访问Promise.html

8.3. 编写PromiseAjax.java

package com.bjbs.pa;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class PromiseAjax extends HttpServlet {
  private static final long serialVersionUID = 1L;

  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//    throw new RuntimeException("runtime exception");
    resp.getWriter().write("Promise Ajax get Request...");
  }
  
  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    doGet(req, resp);
  }
}

8.4. 修改web.xml

8.5. 编写PromiseAjax.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>基于Promise发送Ajax请求</title>
  </head>
  <body>
    <script type="text/javascript">
      function queryData(url){
        var p = new Promise(function(resolve, reject){
              var xhr = new XMLHttpRequest();
              xhr.onreadystatechange = function(){
                if(xhr.readyState != 4) return;
                 
                if(xhr.readyState == 4 && xhr.status == 200){
                    // 处理正常的情况
                    resolve(xhr.responseText);
                  }else{
                    // 处理异常情况
                    reject('服务器错误');
                  }
              };
              xhr.open('get', url);
              xhr.send(null);
          });

          return p;
      }

        queryData('http://localhost:8080/Promise/pa.action').then(function(data){
          // 正常情况进入这个回调函数
            document.write("正常情况: " + data + "<br />");
        }, function(error){
          // 异常情况进入这个回调函数
            document.write("异常情况: " + error + "<br />");
        });
    </script>
  </body>
</html>

8.6. 运行项目, 访问PromiseAjax.html

8.7. 编写then-catch-finally.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Promise发送Ajax请求(then-catch-finally回调函数)</title>
  </head>
  <body>
    <script type="text/javascript">
      function queryData(url){
        var p = new Promise(function(resolve, reject){
              var xhr = new XMLHttpRequest();
              xhr.onreadystatechange = function(){
                if(xhr.readyState != 4) return;
                 
                if(xhr.readyState == 4 && xhr.status == 200){
                    // 处理正常的情况
                    resolve(xhr.responseText);
                  }else{
                    // 处理异常情况
                    reject('服务器错误');
                  }
              };
              xhr.open('get', url);
              xhr.send(null);
          });

          return p;
      }

        queryData('http://localhost:8080/Promise/pa.action').then(function(data){
          // 正常情况进入这个回调函数
            document.write("正常情况: " + data + "<br />");
        }).catch(function(error){
          document.write("异常情况: " + error + "<br />");
        }).finally(function(){
          document.write("finally回调函数总会调用" + "<br />");
        });
    </script>
  </body>
</html>

8.8. 运行项目, 访问then-catch-finally.html