promise封装原生ajax
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let pro = function (url){
return new Promise((resolve,reject)=>{ //创建promise实例化对象
let xhr = new XMLHttpRequest() //创建xhr核心
xhr.open("get",url,false) //配置请求地址和请求方式
xhr.onreadystatechange((res)=>{
// 判断是否请求成功
if(xhr.readyState==4&&xhr.status==200){
// 返回成功回调
resolve(xhr.responseText())
}else{
reject("失败") //请求失败用relove传递出去
}
})
xhr.send() //向后台发送请求
})
}
pro("www.baidu.com").then((res)=>{
console.log(res) //接收成功回调
}).catch((err)=>{
console.log(err) //接收失败回调
})
</script>
</body>
</html>
promis封装$.ajax()
和封装原生基本一个思路只是ajax的写法不同
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.4.1.js"></script>
<!-- 引入jq -->
</head>
<body>
<script>
let fun = function(url){
return new Promise((resolve,reject)=>{
$.ajax({
type:"get",
url,
data:{},
success(res){
resolve(res)
},
error(err){
reject(err)
}
})
})
}
fun(" https://www.365msmk.com/api/app/courseBasis").then((res)=>{
console.log(res)
})
</script>
</body>
</html>
promise封装fetch
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let fet = function (url){
return new Promise((resolve,reject)=>{
resolve( fetch(url,{
type:"get",
query:"",
success(res){
return res.text()
}
}))
})
}
fet("https://www.365msmk.com/api/app/courseBasis").then((res)=>{
return res.text()
}).then((res)=>{
console.log(JSON.parse(res))
})
</script>
</body>
</html>