有下面幾種基本的使用方式。 <br/> **1. 基本使用過程** ```js /** * 1. 創建Promise對象 */ const fun01 = (count) => { /** * resolve：成功時的回調函數 * reject：失敗時的回調函數 */ return new Promise((resolve, reject) => { if (count === 1) { resolve('成功時的回調') } else { reject('失敗時的回調') } }) } /** * 2. 可以調用函數 then(value, reason) 獲取Promise對象的返回值 * value：成功時的返回值 * reason：失敗時的返回值 */ fun01(1).then( (value) => { console.info('sucess', value) //sucess 成功時的回調 }, (reason) => { console.info('fail', reason) } ) fun01(2).then( (value) => { console.info('success', value) }, (reason) => { console.info('fail', reason) //fail 失敗時的回調 } ) /** * 捕獲異常。 * 可以將函數 then(value, reason) 寫成 then(value).catch(reason) 來捕獲異常 */ fun01(3).then((value) => { console.info('success', value) }) .catch((reason) => { console.error('fail', reason) //fail 失敗時的回調 }) ``` <br/> **2. 封裝基于定時器的異步編程** ```java const fun01 = (count) => { return new Promise((resolve, reject) => { setTimeout(() => { if (count === 1) { resolve('成功時的回調') } else { reject('失敗時的回調') } }, 2000) }) } fun01(1) .then((value) => { console.info('success', value) //等待2000ms后輸出：success 成功時的回調 }) .catch((reason) => { console.error('fail', reason) }) ``` <br/> **3. 封裝異步請求** ```java const fun02 = (url) => { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { if (xhr.readyState != 4) return const { status, response } = xhr if (status === 200) { resolve(JSON.parse(response)) } else { reject(new Error(`message：請求失敗, status:${status}`)) } } xhr.open('GET', url) xhr.send() }) } fun02('http://localhost:3000/src/assets/demo.json') .then((value) => { console.info('sucess', value) //sucess {username: '張三', passowrd: '123456'} }) .catch((reason) => { console.info(reason) }) ```