Promise基本使用 ，promise 与 Ajax封装

 Promise是JS中进行异步编程的新的解决方案

• 表达：
  ①从语法上看：Promise是一个构造函数 (自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法)
  ②从功能上看：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

<button id="btn">点击事件</button>

<script>

// 生成随机数

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对象传出的值作为参数
 

</script>

promise 与 Ajax封装

<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博客