Vue.js 学习笔记十四：Promise 之三种状态

目录

Promise 三种状态

---

Promise 三种状态

• 初始化状态（等待状态）：pending

• 成功状态：fullfilled

• 失败状态：rejected

   

  

当 new Promise() 执行之后，promise 对象的状态会被初始化为pending，这个状态是初始化状态。new Promise()这行代码，括号里的内容是同步执行的。括号里定义一个 function，function 有两个参数：resolve 和 reject。如下：

• 如果请求成功了，则执行 resolve()，此时，promise 的状态会被自动修改为 fullfilled。

• 如果请求失败了，则执行 reject()，此时，promise 的状态会被自动修改为 rejected。

promise.then() 方法，括号里面有两个参数，分别代表两个函数 function1 和 function2：

• 如果 promise 的状态为 fullfilled（意思是：如果请求成功），则执行function1里的内容

• 如果promise 的状态为 rejected（意思是，如果请求失败），则执行function2里的内容

另外，resolve() 和 reject() 这两个方法，是可以给 promise.then() 传递参数的。

		<script type="text/javascript">
			const runAsync = () => {
				let promise = new Promise((resolve, reject) => { 
                    	// 进来之后，状态为 pending
						// 这行代码是同步的
						console.log('开始请求');
						// 开始执行异步操作（比如 ajax 请求接口，这里暂时用定时器代替）
						setTimeout(() => {
							// 接口返回的数据
							const data = {code: 200,msg: 'hello world'}
							if (data.code === 200) {
								// 如果请求成功了，请写 resolve()，此时，promise 的状态会被自动修改为fullfilled
								resolve(data)
							} else {
								// 如果请求失败了，请写 reject()，此时，promise 的状态会被自动修改为rejected
								reject({code: 500,msg: 'network error'})
							}
						}, 1000)
					})
					//调用 promise 的 then()
					.then(succ => {
							//如果 promise 的状态为 fullfilled，则执行这里的代码
							console.log(succ)
							document.getElementById('res-data').innerHTML = JSON.stringify(succ)
						},
						fail => {
							//如果 promise 的状态为 rejected，则执行这里的代码
							console.error(fail)
							document.getElementById('res-data').innerHTML = JSON.stringify(fail)

						})
				return promise
			}
		</script>