reco-fetch

• fetch 必然要替換 XMLHttpRequest ，因此是時候嘗試 fetch 了；
• 本封裝僅針對npm引入；
• 本封裝依賴 es6-promise 和 whatwg-fetch，分別對 promise 和 fetch 進行兼容性處理；
• 還有一種兼容性處理是依賴 es6-promise 和isomorphic-fetch ，可是看它的源碼就會發現，isomorphic-fetch 只不過是引用了 whatwg-fetch ，並無作二次開發，
  isomorphic-fetch 只是將fetch添加爲全局，以便其API在客戶端和服務器之間保持一致，因此不必。

封裝的主要內容

1. fetch 的請求方式同 $ajax 和 axios 都不太同樣，而且它自己的get請求同其餘請求對數據的處理和herder也不太相同，因此爲了統一請求行爲，方便請求過程，將請求過程進行封裝；
2. fetch 請求的結果均返回到.then()中，可是平時的習慣是是在 .then() 中處理正確結果，.catch() 中處理錯誤，因此對請求結果進行統一處理；
3. fetch 自己沒有 請求超時 這個概念，因此經過 Promise.race 來處理，它的做用是多個promise同時運行，返回的結果以最快返回結果的那個promise的值爲準。

Fetch for browser.

Install

$ npm isntall reco-fetch

Including reco-fetch

Script tag

<script src="/node_modules/reco-fetch/dist/recoFetch.min.js"></script>

Import

import recoFetch from 'reco-fetch'

Config

In addition to the parameters given below, please combine other parameters MDN.

/**
 * @param {String, must} url    API URL
 * @param {String, must} options Parameter objects, including:
 *        method  {String, optional} Request method, default 'get'
 *        headers {Object, optional} Set request header
 *        params  {Object, optional} url parameters
 *        body    {Object, optional} request body
 *        timeout {Number, optional} Request timeout
 *        type    {String, optional} When 'post' requests, you can set: 'json', 'formData'
 */

const options = {
  method: 'post',
  headers: {},
  timeout: 1000,
  body: {
    id: 1,
    value: 2
  }
}

recoFetch(url, options). then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

Example

GET

const options = {
  method: 'get',
  params: {
    key: 1,
    value: 2
  }
}

recoFetch(url, options). then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

POST JSON

const options = {
  method: 'post',
  body: {
    key: 1,
    value: 2
  },
  type: 'json'
}

recoFetch(url, options). then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

POST formData

const options = {
  method: 'post',
  body: {
    key: 1,
    value: 2
  },
  type: 'formData'
}

// or

const form = document.querySelector('form')
const options = {
  method: 'post',
  body: form
}

recoFetch(url, options). then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

PUT

const options = {
  method: 'put',
  body: {
    key: 1,
    value: 2
  },
  type: 'json'
}

// or

const options = {
  method: 'put',
  body: JSON.stringify({
    key: 1,
    value: 2
  })
}

recoFetch(url, options). then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

DELETE

const options = {
  method: 'delete',
  params: {
    key: 1,
    value: 2
  }
}

recoFetch(url, options). then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

uploadFile

const fileField = document.querySelector("input[type='file']")

const options = {
  method: 'post',
  body: {
    file: fileField.files[0]
  },
  type: 'formData'
}

// or

const formData = new FormData()
const fileField = document.querySelector("input[type='file']")

formData.append('file', fileField.files[0])

const options = {
  method: 'post',
  body: formData
}

recoFetch(url, options). then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

License

MIT

若是以爲還能夠，歡迎給個 Star

我的博客：午後南雜