使用promise的方式
fetch('http://api.duans.top/')
.then(function (response) {
// response是一个数据流, 无法直接使用; 需要使用.json()方法对齐进行转换
console.log(response);
// .json()方法本身是基于promise的, 所以无法直接接收其返回值; 必须使用.then()传入一个成功回调函数
response.json().then((res) => {
console.log(res);
})
})
async/await
fetch('http://api.duans.top/')
.then(async function (response) {
// response是一个数据流, 无法直接使用; 需要使用.json()方法对齐进行转换
console.log(response);
// .json()方法本身是基于promise的, 所以无法直接接收其返回值; 可使用async/await将其转换成同步操作
const res=await response.json();
console.log(res);
})
使用fetch发送其他类型(POST)的请求,并向数据接口提交数据
var url = 'https://example.com/profile';
var data = {username: 'example'};
// 将{}(对象)=>queryString(查询字符串); 服务器端无法直接对json进行处理
function obj2str(data){
if(typeof(data)=='object'){
var arr=[];
for(var key in data){
arr.push(key+'='+data[key])
}
return arr.join('&');
}
return data;
}
fetch(url, {
method: 'POST', // or 'PUT'
body: obj2str(data), // 此处需要一个查询字符串:username=example&age=30
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
- 使用URLSearchParams快速构建查询字符串
var params=new URLSearchParams();
params.append('name','zs');
params.append('age',30);
// 打印结果:name=zs&age=30
console.log(params);
fetch(url, {
method: 'POST', // or 'PUT'
body: params, // 此处需要一个查询字符串:username=example&age=30
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
})
}).then(res => res.json())
.then(response => console.log(response));
使用fetch上传文件
var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
fetch支持的参数
function postData(url, data) {
// Default options are marked with *
return fetch(url, {
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
}
fetch-jsonp发送跨域请求
fetchJsonp('/users.jsonp', {
// 设置回调函数名; 默认为callback
jsonpCallback: 'cb',
})
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
参考文档
网友评论