API

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
   }
  }