當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

023_Promise

發(fā)布時(shí)間：2025/5/22 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 023_Promise 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

1.1. schema: 協(xié)議。例如: http、https、ftp等。

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

1.3. port: 端口, http默認(rèn)端口80, 可以省略。

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

1.5. query: 查詢參數(shù), 例如: uname=lisi&pwd=123。

1.6. fragment: 錨點(diǎn)(哈希Hash), 用于定位頁面的某個(gè)位置。

2. http請求方式

2.1. get

2.2. post

2.3. put

2.4. delete

3. Promise概述

3.1. Promise是異步編程的一種解決方案, 從它可以獲取異步操作的消息。Promise是ES6中的一個(gè)對(duì)象。

3.2. Promise對(duì)象提供了簡潔的API, 使得控制異步操作更加容易。

4. Promise基本用法

4.1. 實(shí)例化Promise對(duì)象, 構(gòu)造函數(shù)中傳遞函數(shù), 該函數(shù)中用于處理異步任務(wù)。

4.2. resolve和reject兩個(gè)參數(shù)用于處理成功和失敗兩種情況, 并通過p.then獲取處理結(jié)果。

5. Promise處理原生的Ajax請求

5. then參數(shù)中的函數(shù)返回值

5.1. 返回Promise實(shí)例對(duì)象, 該實(shí)例對(duì)象會(huì)調(diào)用下一個(gè)then。

5.2. 返回普通值, 該值會(huì)傳遞給下一個(gè)then, 通過下一個(gè)then參數(shù)中的函數(shù)接收該值。

6. then()、catch()和finally()函數(shù)

6.1. p.then()得到異步任務(wù)的正確結(jié)果。

6.2. p.catch()獲取異常信息。

6.3. p.finally()成功或失敗都會(huì)執(zhí)行的函數(shù)。

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

7. Promise多任務(wù)處理

7.1. Promise.all()并發(fā)處理多個(gè)異步任務(wù), 所有任務(wù)都執(zhí)行完成才能得到結(jié)果。

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

7.2. Promise.race()并發(fā)處理多個(gè)異步任務(wù), 只要有一個(gè)任務(wù)完成就能得到結(jié)果。

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

8. 新建一個(gè)名為Promise的動(dòng)態(tài)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){// 這里用于實(shí)現(xiàn)異步任務(wù)setTimeout(function(){var flag = true;if(flag){// 正常情況resolve('成功了');}else{// 異常情況reject('出錯(cuò)了');}}, 100);});p.then(function(data){// 正常情況進(jìn)入這個(gè)回調(diào)函數(shù)document.write("正常情況: " + data + "<br />");}, function(error){// 異常情況進(jìn)入這個(gè)回調(diào)函數(shù)document.write("異常情況: " + error + "<br />");});</script></body> </html>

8.2. 運(yùn)行項(xiàng)目, 訪問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;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // throw new RuntimeException("runtime exception");resp.getWriter().write("Promise Ajax get Request...");}@Overrideprotected 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發(fā)送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('服務(wù)器錯(cuò)誤');}};xhr.open('get', url);xhr.send(null);});return p;}queryData('http://localhost:8080/Promise/pa.action').then(function(data){// 正常情況進(jìn)入這個(gè)回調(diào)函數(shù)document.write("正常情況: " + data + "<br />");}, function(error){// 異常情況進(jìn)入這個(gè)回調(diào)函數(shù)document.write("異常情況: " + error + "<br />");});</script></body> </html>

8.6. 運(yùn)行項(xiàng)目, 訪問PromiseAjax.html

8.7. 編寫then-catch-finally.html??

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Promise發(fā)送Ajax請求(then-catch-finally回調(diào)函數(shù))</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('服務(wù)器錯(cuò)誤');}};xhr.open('get', url);xhr.send(null);});return p;}queryData('http://localhost:8080/Promise/pa.action').then(function(data){// 正常情況進(jìn)入這個(gè)回調(diào)函數(shù)document.write("正常情況: " + data + "<br />");}).catch(function(error){document.write("異常情況: " + error + "<br />");}).finally(function(){document.write("finally回調(diào)函數(shù)總會(huì)調(diào)用" + "<br />");});</script></body> </html>

8.8. 運(yùn)行項(xiàng)目, 訪問then-catch-finally.html?

總結(jié)

以上是生活随笔為你收集整理的023_Promise的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

_Promise