withFetch >=1.1.6

withFetch 是组件的装饰器（HoC，高阶组件），可以给业务组件的实例注入 fetch 方法使组件能够发送请求，并且可以 abort 请求，用法与 redux 的 connect 相同，如：

const App = () => <div>hello</div>
// 普通装饰方式
export default withFetch(App)
// 类装饰方式
@withFetch
class App extends Component {}

直接使用组件实例 this 调用 fetch 方法，会返回一个 Promise 对象（暂命名 request），并且 request 带有 abort 方法，可以直接调用， abort 掉当前请求。abort 掉后， 如果request有被catch，则catch里的回调函数会被执行。

注意：组件销毁时，该组件已发出且未完成的请求会自动 abort 掉（spa, hy 下回退页面才存在组件销毁，因为新开页面是覆盖在旧页面之上的）

基本示例：

@withFetch
class Index extends Component {
 ...
 addRequest() {
   const request = this.fetch('/testfetch', { timeout: 2000, ... })
   // 获取 text 数据
   request.then(res => res.text()).then(text => console.log(text))
   // 获取 json 数据
   request.then(res => res.json()).then(
     json => console.log('parsed json', json)
   ).catch(
     ex => console.log('parsing failed', ex)
   )
   // request.abort() 可以abort掉请求
 }
}

Response metadata：

fetch.('users.json').then(res => {
 console.log(res.headers['Content-Type'])
 console.log(res.headers['Date'])
 console.log(res.status)
 console.log(res.statusText)
})

Post：

fetch('users', {
 method: 'POST',
 headers: {
   'Content-Type': 'application/json'
 },
 body: {
   name: 'ZWJ',
   login: 'zwj'
 }
})

GET（注意：GET 请求参数可以设为 body，但不要同时在 url 上带查询参数，还设置了 body，因为在解析 body 时，会自动在 url 后面加上 ?，会导致请求参数错误）：

fetch('users', {
 body: {
   name: 'ZWJ',
   login: 'zwj'
 }
})
// HTTP 请求 url 最终会解析成：'users?name=ZWJ&login=zwj'

fetch 不同于 jQuery.ajax()，当 HTTP 请求返回错误状态，例：HTTP 404、HTTP 500…，请求是被认为请求成功的，会执行 Promise 的 success 回调。那么如何处理 HTTP 请求返回错误状态：

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

方法

fetch

方法参数:

withFetch

方法参数: