fetch请求(promise的封装)

发表于 | 分类于

1 一般的fetch用法

1
2
3
4
5
fetch(url,option).then(response=>{
  //handle HTTP response
}).then(error=>{
  //handle HTTP error
})

具体的栗子如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
fetch(url, { //option
  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
  return response.text()
}, function(error) {
  error.message //=> String
})

2 参数解析

url 地址: ‘./path’

option :

  • method (String) - HTTP request method. Default: "GET"
  • body (String, body types) - HTTP request body
  • headers (Object, Headers) - Default: {}
  • credentials (String) - Authentication credentials mode. Default: "omit"``"omit" - don’t include authentication credentials (e.g. cookies) in the request"same-origin" - include credentials in requests to the same site"include" - include credentials in requests to all sites

Response

Response represents a HTTP response from the server. Typically a Response is not constructed manually, but is available as argument to the resolved promise callback.

Properties

  • status (number) - HTTP response code in the 100–599 range
  • statusText (String) - Status text as reported by the server, e.g. “Unauthorized”
  • ok (boolean) - True if status is HTTP 2xx
  • headers (Headers)
  • url (String)

Body methods 注意每个方法返回的都是一个Promise对象,

Each of the methods to access the response body returns a Promise that will be resolved when the associated data type is ready.

  • text() - yields the response text as String
  • json() - yields the result of JSON.parse(responseText)
  • blob() - yields a Blob
  • arrayBuffer() - yields an ArrayBuffer
  • formData() - yields FormData that can be forwarded to another request

Other response methods

  • clone()
  • Response.error()
  • Response.redirect()