js原生fetch方法??小抄级汇总

fetch

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。

Fetch 的出现就是为了解决 XHR 的问题。同时简洁的语法，基于标准 Promise 的实现，支持 async/await等特性更是如虎添翼，废话不多说，上示例。

  fetch('请求的地址',{
    method:'请求方法',
    headers:{ 'content-type':'设置请求头' },
    cache:'是否缓存这个请求',
    credentials:'要不要携带cookie',
    mode:'给请求定义一个模式确保请求有效',
  }).then(res=>{
    // res可以使用body方法和属性
    res.type; // response的类型
    res.url;// respnse的URL
    res.staus;// 状态码
    res.ok;//response成功还是失败
    res.headers;// 次response所关联的Headres对象
    res.clone();// 创建一个response的克隆
    res.arrayBuffer() // 返回一个被解析为 ArrayBuffer 格式的promise对象
    res.blob() // 返回一个被解析为 Blob 格式的promise对象
    res.formData() // 返回一个被解析为 FormData 格式的promise对象
    res.json() // 返回一个被解析为 Json 格式的promise对象
    res.text() // 返回一个被解析为 Text 格式的promise对象resp.arrayBuffer() // 返回一个被解析为 ArrayBuffer 格式的promise对象
    res.blob() // 返回一个被解析为 Blob 格式的promise对象
    res.formData() // 返回一个被解析为 FormData 格式的promise对象
    res.json() // 返回一个被解析为 Json 格式的promise对象
    res.text() // 返回一个被解析为 Text 格式的promise对象
  }).then(res => {
    console.log('打印请求成功返回来的数据',res)
  }).catch(err => {
    console.log('打印错误信息',err)
  })

属性详解

• method - GET, POST, PUT, DELETE, HEAD
• url - 请求的url
• headers - 对应的Header对象
• referrer - 请求的referrer信息
• mode - 模式，可选类型有cors, no-cors, same-origin
• credentials - 是否携带cookie，可选类型有omit, same-origin
• redirect - follow, error, manual
• integrity - subresource integrity value
• cache - 缓存模式，可选类型有default, reload, no-cache
• resp.type : 类型，支持basic, cors
• resp.arrayBuffer() : 返回一个promise,resolves是一个ArrayBuffer

发送一些普通的JSON数据

  fetch('url',{
    method:'POST',
    body: JSON.stringify({
      key1:"value",
      key2:"value"
    })
  })

获取图片

  fetch('url').then(res => {
    return res.blob()
  }).then(res => {
    document.querySelector('img').src = URL.createObjectURL(imageBlob)
  })

发送表单数据

    var form = document.querySelector('form');
    fetch('/xxx', {
        method: 'post',
        body: new FormData(form)
    });