资讯专栏INFORMATION COLUMN

【译】fetch用法说明

30e8336b8229 / 872人阅读

摘要:实例生成以后,可以用方法分别指定方法和方法的回调函数。创建一个对象异步操作成功方法可以接受两个回调函数作为参数。第一个回调函数是对象的状态变为时调用,第二个回调函数是对象的状态变为时调用。

由于 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: 请求使用的方法,如 GETPOST

headers: 请求的头信息,形式为 Headers 对象或 ByteString

body: 请求的 body 信息:可能是一个 BlobBufferSourceFormDataURLSearchParams 或者 USVString 对象。注意 GETHEAD 方法的请求不能包含 body 信息。

mode: 请求的模式,如 corsno-cors 或者 same-origin

credentials: 请求的 credentials,如 omitsame-origin 或者 include

cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached

response

一个 Promiseresolve 时回传 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

引入 Promisepolyfill: es6-promise

引入 fetch 探测库:fetch-detector

引入 fetchpolyfill: fetch-ie8

可选:如果你还使用了 jsonp,引入 fetch-jsonp

可选:开启 Babelruntime 模式,现在就使用 async/await

翻译自 Fetch

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80513.html

相关文章

  • [] 浏览器中的 ECMAScript 模块

    摘要:浏览器问题执行多次模块。浏览器问题加载页面失败加载没有的模块脚本。您可以通过添加属性来向同源模块添加凭据这对我来说似乎有点奇怪,我在规范中对此提出质疑。浏览器问题使用凭据请求同源模块。已在中修复默认请求同源模块的时候携带了凭据。 原文链接:ECMAScript modules in browsers作者:Jake Archibald 浏览器现在可以使用 ES 模块(module)了!...

    canger 评论0 收藏0
  • |调整JavaScript抽象的迭代方案

    摘要:随时调整模块移除模块。你该做什么在源代码管理历史记录中找到旧的模块。官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享出品基于搭建实战项目教程包含文章视频源代码 原文作者:Kaloyan Kosev 原文链接:https://css-tricks.com/adapting-javascript-abstractions-time/ 翻...

    madthumb 评论0 收藏0
  • []将PHP扩展从PHP5升级到NG(PHP7)

    摘要:在这些情况下,应将相应的变量转换为纯,使用此变量从到和相应的创建宏从,到,。因此使用标志的宏被移除,和。宏可以用于在析构函数中达到实际的指针值。另外,如果使用添加元素,析构函数也负责指针本身的解除分配。应使用最佳的宏,而不是旧的和功能。 许多经常使用的API函数已经更改,例如HashTable API; 这个页面致力于记录尽可能多的实际影响扩展和核心代码的更改。 强烈建议在阅读本指南之...

    Chaz 评论0 收藏0
  • ES6 系列之我们来聊聊 Async

    摘要:标准引入了函数,使得异步操作变得更加方便。在异步处理上,函数就是函数的语法糖。在实际项目中,错误处理逻辑可能会很复杂,这会导致冗余的代码。的出现使得就可以捕获同步和异步的错误。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。 async ES2017 标准引入了 async 函数,使得异步操作变得更加方便。 在异步处理上,async 函数就是 Generator 函数的语法糖。 ...

    Songlcy 评论0 收藏0
  • []前端离线指南(上)

    摘要:接受一个对象作参数,来定义安装时长和安装是否成功,如果状态为,则认为此次安装失败,并且抛弃如果一个旧版本的正在运行,则它将保持不变。在页面既可以在中获取到,也可以在页面中获取到,这就意味着你不必一定要通过来向缓存中添加内容。 原文链接:The offline cookbook作者:Jake Archibald 使用AppCache可以为我们提供几种支持内容离线工作的模式。如果这些模式正...

    nanfeiyan 评论0 收藏0

发表评论

0条评论

30e8336b8229

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<