Javascript 将JS类类转换为真实类

我在我的项目中发现了这一点，我希望通过实现一个真正的类来改进它

const Fetch = {};

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

function parseJSON(response) {
    return response.json();
}

/**
* @function
* @name Fetch
*/
Fetch.Fetch = (src, options = {}) => {
  return window.fetch(src, options)
    .then(checkStatus);
}

/**
* @function
* @name FetchJSON
*/
Fetch.FetchJSON = (src, options = {}) => {
  return window.fetch(src, options)
    .then(checkStatus)
    .then(parseJSON);
}

/**
* @function
* @name GetJSON
*/
Fetch.GetJSON = (src, options = {}) => {
  options = Object.assign({}, options, {
    method: 'GET'
  });

  return Fetch.FetchJSON(src, options);
}

Fetch.GetApiJSON = (src, options = {}) => {
  options = Object.assign({}, options, {
    headers: {
      'some-info': 'your header'
    }
  });

  return Fetch.GetJSON(src, options);
}

module.exports = Fetch;

我可以用承诺，那样。

---

简言之，您认为什么是最好的方法？

一个选项是实现流畅的界面。举例说明可能是最简单的：

const req = new Fetch('http://example.com');

req.get().then(handleResponse);
// -> calls window.fetch('http://example.com', { method: 'GET' })

const req2 = req.headers({ 'Content-Type': 'application/csv' });

req2.get().then(handleResponse);
// -> calls window.fetch('http://example.com', {
//            headers: { 'Content-Type': 'application/csv' },
//            method: 'GET' })

req2.options({ mode: 'no-cors' }).get().then(handleReponse);
// -> calls window.fetch('http://example.com', {
//            headers: { 'Content-Type': 'application/csv' },
//            mode: 'no-cors',
//            method: 'GET' })

你明白了。每个方法调用都会返回一个新对象，我们可以使用该对象发出请求，也可以调用其他方法来添加选项、标题等（或两者兼而有之）

一个实现看起来像这样。我已经删除了

窗口。fetch

所以它只记录一些信息来显示结果

功能检查状态（响应）{
如果（response.status>=200&&response.status<300）{
返回响应；
}否则{
常量错误=新错误（response.statusText）；
error.response=响应；
投掷误差；
}
}
函数parseJSON（响应）{
返回response.json（）；
}
函数合并选项（…选项）{
const headers=Object.assign（{}，…options.map（{headers}=>headers））；
返回Object.assign（{}，{options，{headers}）；
}
类获取{
构造函数（url，选项={}）{
this.url=url；
这是._options=options；
}
选项（opts={}）{
返回新的Fetch（this.url，mergeOptions（this.\u options，opts））；
}
标题（标题={}）{
返回this.options（{headers}）；
}
fetch（）{
返回window.fetch（this.url，this.u选项），然后（checkStatus）；
}
得到（）{
返回此.options（{method:'GET'}）.fetch（）；
}
getJSON（）{
返回this.get（）.then（parseJSON）；
}
getApiJSON（）{
返回this.headers（{'some info'：'your header'}）；
}
}
//把这个剪下来演示一下
window.fetch=（…参数）=>{
log（'Called window.fetch with args'，args）；
还愿({
现状：200，
json（）{return{hello:'world'}；}
});
}
函数logResponse（res）{console.log（'Got response'，res）；}
//创建一个获取对象
const req=new Fetch（'http://example.com');
//做一个基本的抓取
req.fetch（）.then（logResponse）；
//向上一页添加一些选项
const reqWithNoCache=req.options（{cache:'no cache'}）；
reqWithNoCache.fetch（）.then（logResponse）；
//向上一页添加一些标题
const reqWithNoCacheAndHeader=reqWithNoCache.headers（{'Accept Language'：'en-US'）；
reqWithNoCacheAndHeader.fetch（）.then（logResponse）；
//使用方便的方法与以前的
reqWithNoCacheAndHeader.getApiJSON（）.then（logResponse）
.as console wrapper{min height:100%}
现在您有一组方法附加到一个对象。如果你不想/不需要某事物的多个实例，那么这是一种完全可以接受的方式。如果您希望能够创建它的多个实例，那么您需要创建一个构造函数。
const req = new Fetch('http://example.com');

req.get().then(handleResponse);
// -> calls window.fetch('http://example.com', { method: 'GET' })

const req2 = req.headers({ 'Content-Type': 'application/csv' });

req2.get().then(handleResponse);
// -> calls window.fetch('http://example.com', {
//            headers: { 'Content-Type': 'application/csv' },
//            method: 'GET' })

req2.options({ mode: 'no-cors' }).get().then(handleReponse);
// -> calls window.fetch('http://example.com', {
//            headers: { 'Content-Type': 'application/csv' },
//            mode: 'no-cors',
//            method: 'GET' })