/*
* 分析:封装fetch:更快,更简单的请求数据
* @version 1.0.0
* @author yanmeiliang1
* @liense
* */
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))
})
}
//delet
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))
})
}
}
const http=new EasyHttp;
//get请求数据
//const users=http.get("http://jsonplaceholder.typicode.com/users")
//.then((data)=>{
// console.log(data);
//})
//.catch(err=>console.log(err))
//;
//console.log(users.then(data=>console.log(data)));
//http.get("http://jsonplaceholder.typicode.com/users");
//传输数据put user
const data={
name:"Henry",
username:"米斯特五",
email:"1234@qq.com"
};
//http.post("http://jsonplaceholder.typicode.com/users",data)
//.then(data=>console.log(data))
//.catch(err=>console.log(err));
//结果:{name: "Henry", username: "米斯特五", email: "1234@qq.com", id: 11}
//update user
//http.put("http://jsonplaceholder.typicode.com/users/2",data)
//.then(data=>console.log(data));
//.catch(err=>console.log(err));
//结果:{name: "Henry", username: "米斯特五", email: "1234@qq.com", id: 2}
//delet user
http.delete("http://jsonplaceholder.typicode.com/users/2")
.then(data=>console.log(data))
.catch(err=>console.log(err));
//结果:数据删除成功
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
</head>
<body>
<script type="text/javascript" src="easyhttp.js"></script>
<script type="text/javascript" src="app1.js"></script>
</body>
</html>