传统使用回调函数的方式
1.get请求方法的封装
/**
* get请求数据
* @param url url地址
* @param callback 回调函数
*/
let getJson = function (url,callback) {
fetch(url).then((response) => response.json())
.then((data)=>{
callback(data)
})
}
2.post请求的封装
/**
* post提交数据或者请求数据
* @param url url地址
* @param data 提交的数据
* @param callback 回调函数
*/
let postJson = function(url,data,callback){
var fetchOptions = {
method:"POST",
headers:{
"Accept":"application/json",
"Content-Type":"application/json"
},
body:JSON.stringify(data)
};
fetch(url,fetchOptions).then((response)=>response.json()).then((data)=>{
callback(data);
})
}
借助ES6
中的promise
的方式封装
1.get
请求方式
let getJson = (url) => {
return new Promise((resolve, reject) => {
fetch(url).then(function (response) {
return response.json();
}).then(function (json) {
resolve(json);
})
});
}
调用方法
getJson("http://www.xxx/mobile.php?c=Product&a=category").then((data) => {
console.log(data);
}).catch((err) => {
console.log(err);
})
备注:如果要获取请求头信息就要在
fetch(url).then(function (response) {
里面获取
return response.json();
})
2.post
请求方式
let postJson = (url)=>{
var fetchOptions = {
method:"POST",
headers:{
"Accept":"application/json",
"Content-Type":"application/json"
},
body:JSON.stringify(data)
};
return new Promise((resolve, reject)=>{
fetch(url,fetchOptions).then((response)=>response.json()).then((data)=>{
resolve(data);
})
})
}
关于fetch
的参数认识
fetch(input,init).then(function(response){...});
- 1、
input
定义一个要获取的资源一般是url
2、
init
可选的配置对象mothod
请求使用的方法,如GET/POST
headers
请求头信息,如Headers
对象或者ByteString
body
请求的body
信息mode
请求的模式
3、
fetch()
方法用于发起获取资源的请求,它返回一个Promise
,这个Promise
会在请求响应后被resolve
,并返回一个Response
对象fetch(url,init).then(response=>response.json()).then(data=>console.log(data)).catch(error=>console.log(error));