使用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)
  })

参考文档

• mdn

• fetch-jsonp