023_Promise
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;@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發送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?
總結
以上是生活随笔為你收集整理的023_Promise的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 022_Vue购物车
- 下一篇： 024_Fetch