Promise
是JS中进行异步编程的新的解决方案
表达:
①从语法上看:Promise
是一个构造函数 (自己身上有all
、reject
、resolve
这几个方法,原型上有then
、catch
等方法)
②从功能上看:promise
对象用来封装一个异步操作并可以获取其成功/失败的结果值
// 生成随机数
function rand(m,n){
return Math.ceil(Math.random()*(n-m+1)) + m-1;
}
const btn= document.querySelector("#btn")
btn.addEventListener('click',function(){//添加点击事件
//
Promise
构造函数接受一个函数(执行器函数)作为参数,//该函数的两个参数分别是
resolve
和reject
。const p = new Promise((resove,reject)=>{
setTimeout(()=>{ //包裹一个异步操作
let n = rand(1,100);
if(n<=30){
resove()
//
resolve
函数的作用是,将Promise
对象的状态从“未完成”变为“成功”//(即从
pending
变为resolved
),在异步操作成功时调用,并将异步操作的结果,// 作为参数
value
传递出去;}
else{
reject()
//
reject
函数的作用是,将Promise
对象的状态从“未完成”变为“失败”//(即从
pending
变为rejected
),在异步操作失败时调用,并将异步操作报出的错误//,作为参数
error
/reason
传递出去。}
},1000)
})
//
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。p.then(()=>{
alert('成功了')
},()=>{
alert('失败了')
})
})
//then方法可以接受两个回调函数作为参数。
//第一个回调函数onResolved()是Promise对象的状态变为resolved时调用
//第二个回调函数onRejected()是Promise对象的状态变为rejected时调用
//这两个函数都是可选的,不一定要提供。它们都接受Promise对象传出的值作为参数
- <div>promise 与 Ajax封装</div>
- <script>
- function sentAjax(url,data){
- return(
- new Promise((resolve,reject)=>{
- // resolve(1)
- let xhr = new XMLHttpRequest()
- xhr.onreadystatechange =()=>{
- if(xhr.readyState === 4){
- if(xhr.status >= 200 && xhr.status<300){
- resolve(xhr.response)
- }else{
- reject('出错了')
- }
- }
- }
- // 整理url中的参数
- let str=''
- for(key in data){
- str += `${key}=${data[key]}`
- }
- xhr.open('GET',url+'?'+ str)
- xhr.responseType="json"
- xhr.send()
- })
- .then(
- (value)=>{console.log('成功了',value)},
- (reason)=>{console.log(reason)}
- )
- )
- }
- sentAjax('https://api.github.com/search/users',{q:2})
- </script>
Promise 的状态, promise 指定多个成功/失败回调函数,都会调用吗?_Allen 赵奇隆的博客-CSDN博客