使用promise封装 原生ajax，$.ajax(),以及fetch？

如何使用promise封装 原生ajax，$.ajax(),以及fetch

使用Promise封装的原生AJAX请求
(优点: 看起来比较清晰;并且不会产生回调地狱的请求)

//接口地址为;
son-server 模拟API 启动方式: json-server --watch db.json;
//创建一个Promise 实例
const p = new Promise((resolve, reject) =>{
//创建对象
const xhr = new XMLHttpRequest() //初始化对象 xhr.open(‘GET’,‘http://localhost:3000/posts’)
//发送
xhr.send() //绑定事件 处理响应结果
response xhr.onreadystatechange =function () { //判断 ready.state = 4 来证明进入到最后一个阶段
if(xhr.readyState === 4) {
//判断响应状态码
if (xhr.status >= 200 && xhr.status < 300) { List item
//成功 打印读取响应的数据
resolve(xhr.response);
} else {
//失败 打印失败响应的状态码
reject(xhr.status)
}
} } })
p.then(function (value) {
console.log(value); },function (reason) {
console.error(reason) })

使用promise封装$.ajax()操作

function ml_ajax(options) {
// 1. 创建 promise 实例
let p = new Promise((resolve, reject) => {
$.ajax({
// 类型
type: options.method || ‘get’,
// 接口
url: options.url,
// 参数
data: options.data || {},
// 数据返回类型
dataType: ‘json’,
// 成功
success: res => {
// console.log(‘成功’, res)
resolve(res)
},
// 失败
error: err => {
// console.log(‘失败’, err)
reject(err)
},
})
}) 2. 返回promise 实例
return p
}
let url = ‘http://127.0.0.1:3000/post?pageIndex=1&pageSize=2&category=8’
ml_ajax({
url,
}).then(res => {
console.log(‘666’, res)
})

如何使用promise封装fetch
代码如下

.<script type=“text/javascript” // 使用Promise封装fetch库(增删改查)
class EasyHttp{// 封装get 请求
get(url){
return new Promise((resolve, reject) => {
fetch(url)
.then(res => res.json())
.then(data => resolve(data))
.catch(err => reject(err))
})
}
// 封装 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))
})
}
// 封装 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))
})
}
// 封装 delete 请求
delete(url, data){
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))
})
} }
const http = new EasyHttp;
// get请求数据
http.get(‘http://jsonplaceholder.typicode.com/users’)
.then((data) => {
console.log(data)
})
.catch(err => console.log(err))
//post
const data = {
name:“xiangming”,
username:“小明”,
email:“1231231@qq.com”
}
http.post(‘http://jsonplaceholder.typicode.com/users’,data)
.then((data) => {console.log(data)})
.catch(err => console.log(err))
//put
http.put(‘http://jsonplaceholder.typicode.com/users/2’,data)
.then((data) => {console.log(data)})
.catch(err => console.log(err))
//delete
http.delete(‘http://jsonplaceholder.typicode.com/users/2’)
.then((data) => {console.log(data)})
.catch(err => console.log(err)) </script

因文档格式问题所以script标签少写了一部分