<script>
  // 1) 创建 promise 对象(pending 状态), 指定执行器函数 const p = new
  Promise((resolve, reject) =>{" "}
  {
    // 2) 在执行器函数中启动异步任务
    setTimeout(() => {
      const time = Date.now();
      // 3) 根据结果做不同处理
      // 3.1) 如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状态
      if (time % 2 === 1) {
        resolve("成功的值 " + time);
      } else {
        // 3.2) 如果失败了, 调用 reject(), 指定失败的 reason, 变为rejected 状态
        reject("失败的值" + time);
      }
    }, 2000)
  }
  ) // 4) 能 promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason p.then(
  value => {
    // 成功的回调函数 onResolved, 得到成功的 vlaue
    console.log("成功的 value: ", value)
  }, reason => {
    // 失败的回调函数 onRejected, 得到失败的 reason
    console.log("失败的 reason: ", reason)
  })
</script>

<script>
	function doDelay(time) {
		// 1. 创建 promise 对象
		return new Promise((resolve, reject) => {
		// 2. 启动异步任务
			console.log('启动异步任务')
			setTimeout(() => {
				console.log('延迟任务开始执行...')
				const time = Date.now() // 假设: 时间为奇数代表成功, 为偶数代表失败
				if (time %2=== 1) { // 成功了
					// 3. 1. 如果成功了, 调用 resolve()并传入成功的 value
					resolve('成功的数据 ' + time)
				} else { // 失败了
					// 3.2. 如果失败了, 调用 reject()并传入失败的 reason
					reject('失败的数据 ' + time)
				}
			}, time)
		})
	}
	const promise = doDelay(2000)
	promise.then(
		value => {
			console.log('成功的 value: ', value)
		},
		reason => {
			console.log('失败的 reason: ', reason)
		},
	)
</script>

<script>
	/*
	可复用的发 ajax 请求的函数: xhr + promise
	*/
	function promiseAjax(url) {
		return new Promise((resolve, reject) => {
			const xhr = new XMLHttpRequest()
			xhr.onreadystatechange = () => {
			if (xhr.readyState!==4) return
				const {status, response} = xhr
				// 请求成功, 调用 resolve(value)
				if (status>=200 && status<300) {
					resolve(JSON.parse(response))
				} else { // 请求失败, 调用 reject(reason)
					reject(new Error('请求失败: status: ' + status))
				}
			}
			xhr.open("GET", url)
			xhr.send()
		})
	}
	promiseAjax('https://api.apiopen.top2/getJoke?page=1&count=2&type=video')
		.then(
			data => {
				console.log('显示成功数据', data)
			},
			error => {
				alert(error.message)
			}
		)
</script>

<script>
	// 成功的回调函数
	function successCallback(result) {
		console.log("声音文件创建成功: " + result);
	}
	// 失败的回调函数
	function failureCallback(error) {
		console.log("声音文件创建失败: " + error);
	}

	/* 1.1 使用纯回调函数 */
	createAudioFileAsync(audioSettings, successCallback, failureCallback)

	/* 1.2. 使用 Promise */
	const promise = createAudioFileAsync(audioSettings); // 2
	setTimeout(() => {
		promise.then(successCallback, failureCallback);
	}, 3000);

	/*2.1. 回调地狱*/
	doSomething(function(result) {
		doSomethingElse(result, function(newResult) {
			doThirdThing(newResult, function(finalResult) {
				console.log('Got the final result: ' + finalResult)
			}, failureCallback)
		}, failureCallback)
	}, failureCallback)

	/*2.2. 使用 promise 的链式调用解决回调地狱*/
	doSomething().then(function(result) {
		return doSomethingElse(result)
	})
	.then(function(newResult) {
		return doThirdThing(newResult)
	})
	.then(function(finalResult) {
		console.log('Got the final result: ' + finalResult)
	})
	.catch(failureCallback)

	/*2.3. async/await: 回调地狱的终极解决方案*/
	async function request() {
		try {
			const result = await doSomething()
			const newResult = await doSomethingElse(result)
			const finalResult = await doThirdThing(newResult)
			console.log('Got the final result: ' + finalResult)
		} catch (error) {
			failureCallback(error)
		}
	}
</script>