简述promise封装 原生ajax，$.ajax(),以及fetch方法

---

一、原生ajax

1.get方式

<script>
    function getRequest(url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()//创建实例
            //       请求方式  地址  
            xhr.open('GET', url, true)//建立连接
            xhr.onreadystatechange = function () {//监听
                if(xhr.readyState!=4)return
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(this.responseText, xhr)//成功回调
                } else {
                    reject(xhr.responseText)//失败回调
                }
            }
            xhr.send(null)//发送
        })

    }
</script>

2.post方式

function postJSON(url, data) {
        return new Promise((resolve, reject) => {
            var xhr = new XMLHttpRequest()
            xhr.open("POST", url, true)
            //post方式要设置请求头
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState != 4) return
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(xhr.responseText)
                } else {
                    reject(xhr.responseText)
                }
            }
            xhr.send(JSON.stringify(data))
        })
    }

二、$.ajax()

1.get(post只要改type即可)

//                地址  参数   类型
let ajax=function(url, param, type = 'GET'){
    const promise = new Promise(function(resolve, reject){
        $.ajax({
            type: type,//请求类型get，post...
            url: url,//地址
            data: param,//参数
            dataType: 'json',//数据类型（可不写）
            success(res) {
                resolve(res)//成功回调
            },
            error(res) {
                reject('error')//失败回调
            }
        })
    })
    return promise
}

// 调用
ajax('https://editor.csdn.net/md',{id: 1}).then(res=>{
    console.log(res)
})

三、fetch

它就相当于将之前的封装ajax的链接、发送等都封装成了fetch方法后面直接通过url调用就行了

ps：默认为get形式，且除get外都要加请求头

优点：封装fetch能更快,更简单的请求数据

1.get

get(url){
     return new Promise((resolve,reject) => {
        fetch(url)
          .then(res => res.json())
          .then(data => resolve(data))
          .catch(err => reject(err))
     })
   }

2.post

post(url,data){
    return new Promise((resolve,reject) => {
       fetch(url,{
         method:"POST",
         headers:{
           'Content-type':'application/json'
         },
         body:JSON.stringify(data)
       })
         .then(res => res.json())
         .then(data => resolve(data))
         .catch(err => reject(err))
    })
  }

3.put

put(url,data){
    return new Promise((resolve,reject) => {
       fetch(url,{
         method:"PUT",
         headers:{
           'Content-type':'application/json'
         },
         body:JSON.stringify(data)
       })
         .then(res => res.json())
         .then(data => resolve(data))
         .catch(err => reject(err))
    })
  }

4.delete

 delete(url){
    return new Promise((resolve,reject) => {
       fetch(url,{
         method:"DELETE",
         headers:{
           'Content-type':'application/json'
         }
       })
         .then(res => res.json())
         .then(data => resolve('数据删除成功!'))
         .catch(err => reject(err))
    })
  }

---

总结

以上就是今天的全部内容，希望对大家有用哦！😉