【译】fetch用法说明

2024年2月24日 200次阅读 来源: 影绰

因为 FetchAPI 是基于 Promise 设想，有必要先进修一下 Promise，引荐浏览 MDN Promise 教程
本文章内容引荐浏览 MDN Fetch 教程

语法申明

fetch(url, options).then(function(response) {
  // handle HTTP response
}, function(error) {
  // handle network error
})

细致参数案例：

//兼容包
require('babel-polyfill')
require('es6-promise').polyfill()

import 'whatwg-fetch'

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-Type": "application/json"
  },
  credentials: "same-origin"
}).then(function(response) {
  response.status     //=> number 100–599
  response.statusText //=> String
  response.headers    //=> Headers
  response.url        //=> String

  response.text().then(function(responseText) { ... })
}, function(error) {
  error.message //=> String
})

url

定义要猎取的资本。这多是：

  • 一个 USVString 字符串，包含要猎取资本的 URL。

  • 一个 Request 对象。

options（可选）

一个设置项对象，包含一切对要求的设置。可选的参数有：

  • method: 要求运用的要领，如 GET、POST。

  • headers: 要求的头信息，情势为 Headers 对象或 ByteString。

  • body: 要求的 body 信息：多是一个 Blob、BufferSource、FormData、URLSearchParams 或许 USVString 对象。注重 GET 或 HEAD 要领的要求不能包含 body 信息。

  • mode: 要求的形式，如 cors、 no-cors 或许 same-origin。

  • credentials: 要求的 credentials，如 omit、same-origin 或许 include。

  • cache: 要求的 cache 形式: default, no-store, reload, no-cache, force-cache, 或许 only-if-cached。

response

一个 Promise，resolve 时回传 Response 对象：

  • 属性：

    • status (number) – HTTP要求效果参数，在100–599 局限

    • statusText (String) – 服务器返回的状态报告

    • ok (boolean) – 假如返回200示意要求胜利则为true

    • headers (Headers) – 返回头部信息，下面细致引见

    • url (String) – 要求的地点

  • 要领：

    • text() – 以string的情势天生要求text

    • json() – 天生JSON.parse(responseText)的效果

    • blob() – 天生一个Blob

    • arrayBuffer() – 天生一个ArrayBuffer

    • formData() – 天生格式化的数据，可用于其他的要求

  • 其他要领：

    • clone()

    • Response.error()

    • Response.redirect()

response.headers

  • has(name) (boolean) – 推断是不是存在该信息头

  • get(name) (String) – 猎取信息头的数据

  • getAll(name) (Array) – 猎取一切头部数据

  • set(name, value) – 设置信息头的参数

  • append(name, value) – 增加header的内容

  • delete(name) – 删除header的信息

  • forEach(function(value, name){ ... }, [thisContext]) – 轮回读取header的信息

运用案例

GET要求

  • HTML

    fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })

  • IMAGE

    var myImage = document.querySelector('img');

fetch('flowers.jpg')
  .then(function(response) {
    return response.blob();
  })
  .then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });

  • JSON

    fetch(url)
  .then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  }).catch(function(e) {
    console.log("Oops, error");
  });

运用 ES6 的 箭头函数 后：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

response的数据

fetch('/users.json').then(function(response) {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
  console.log(response.status)
  console.log(response.statusText)
})

POST要求

fetch('/users', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

搜检要求状态

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

采纳promise情势

Promise 对象是一个返回值的代办，这个返回值在promise对象建立时未必已知。它许可你为异步操纵的胜利或失利指定处置惩罚要领。 这使得异步要领能够像同步要领那样返回值：异步要领会返回一个包含了原返回值的 promise 对象来替换原返回值。

Promise组织函数接收一个函数作为参数，该函数的两个参数离别是resolve要领和reject要领。假如异步操纵胜利，则用resolve要领将Promise对象的状态变成“胜利”（即从pending变成resolved）；假如异步操纵失利，则用reject要领将状态变成“失利”（即从pending变成rejected）。

promise实例天生今后，能够用then要领离别指定resolve要领和reject要领的回调函数。

//建立一个promise对象
var promise = new Promise(function(resolve, reject) {
  if (/* 异步操纵胜利 */){
    resolve(value);
  } else {
    reject(error);
  }
});
//then要领能够接收两个回调函数作为参数。
//第一个回调函数是Promise对象的状态变成Resolved时挪用，第二个回调函数是Promise对象的状态变成Reject时挪用。
//个中，第二个函数是可选的，不一定要供应。这两个函数都接收Promise对象传出的值作为参数。
promise.then(function(value) {
  // success
}, function(value) {
  // failure
});

那末连系promise后fetch的用法：

//Fetch.js
export function Fetch(url, options) {
  options.body = JSON.stringify(options.body)

  const defer = new Promise((resolve, reject) => {
    fetch(url, options)
      .then(response => {
        return response.json()
      })
      .then(data => {
        if (data.code === 0) {
          resolve(data) //返回胜利数据
        } else {
            if (data.code === 401) {
            //失利后的一种状态
            } else {
            //失利的另一种状态
            }
          reject(data) //返回失利数据
        }
      })
      .catch(error => {
        //捕捉非常
        console.log(error.msg)
        reject() 
      })
  })

  return defer
}

挪用Fech要领：

import { Fetch } from './Fetch'

Fetch(getAPI('search'), {
  method: 'POST',
  options
})
.then(data => {
  console.log(data)
})

支撑状态及解决方案

原生支撑率并不高，荣幸的是，引入下面这些 polyfill 后能够圆满支撑 IE8+ ：

  • 因为 IE8 是 ES3，须要引入 ES5 的 polyfill: es5-shim, es5-sham

  • 引入 Promise 的 polyfill: es6-promise

  • 引入 fetch 探测库：fetch-detector

  • 引入 fetch 的 polyfill: fetch-ie8

  • 可选：假如你还运用了 jsonp，引入 fetch-jsonp

  • 可选：开启 Babel 的 runtime 形式，如今就运用 async/await

翻译自 Fetch

    原文作者：影绰
    原文地址: https://segmentfault.com/a/1190000007019545
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞