Refactor response and closer to raw fetch

Author: WhatAKitty

example/Basic/src/app.js

@@ -19,20 +19,33 @@ class App extends Component {
   }
 
   async getData() {
-    const { data } = await fetch('/api/users');
+    const { data, err } = await fetch('/api/users')
+      .then(res => {
+        if (res.status !== 200) {
+          throw new Error('fetch failed');
+        }
+        return res.json();
+      })
+      .then(data => ({ data }))
+      .catch(err => ({ err }));
+
+    if (err) {
+      return false;
+    }
+    
     this.setState({
       data,
     });
   }
 
   render() {
     return (
-      <View style={ {marginTop: 100} }>
-      {
-        this.state.data.map((item, index) => {
-          return <Text key={ index }>{ item.name }</Text>
-        })
-      }
+      <View style={{ marginTop: 100 }}>
+        {
+          this.state.data.map((item, index) => {
+            return <Text key={index}>{item.name}</Text>
+          })
+        }
       </View>
     );
   }

example/WithMockJs/src/app.js

@@ -19,7 +19,20 @@ class App extends Component {
   }
 
   async getData() {
-    const { data } = await fetch('/api/users/mockjs');
+    const { data, err } = await fetch('/api/users/mockjs')
+      .then(res => {
+        if (res.status !== 200) {
+          throw new Error('fetch failed');
+        }
+        return res.json();
+      })
+      .then(data => ({ data }))
+      .catch(err => ({ err }));
+
+    if (err) {
+      return false;
+    }
+    
     this.setState({
       data,
     });

src/response.js

@@ -1,25 +1,37 @@
 
+const _status = Symbol('status');
+const _data = Symbol('data');
+const _statusText = Symbol('statusText');
+
 class Response {
   constructor({
     status,
     data = {},
     statusText = '',
   }) {
-    this.status = status;
-    this.data = data;
-    this.statusText = statusText;
+    this[_status] = status;
+    this[_data] = data;
+    this[_statusText] = statusText;
+  }
+
+  get status() {
+    return this[_status];
+  }
+
+  get statusText() {
+    return this[_statusText];
   }
 
   text() {
     try {
-      return Promise.resolve(JSON.stringify(data));
+      return Promise.resolve(JSON.stringify(this[_data]));
     } catch (err) {
       return Promise.reject(new Errror('failed text invoke.'));
     }
   }
 
   json() {
-    return this.data;
+    return this[_data];
   }
 
 }

test/index.test.js

@@ -5,34 +5,40 @@ import FetchMock, { Mock } from '../';
 const fetch = new FetchMock(require('../__mocks__')).fetch;
 describe('test fetch mock', () => {
   it('fetch /api/users data', async () => {
-    const { status, data } = await fetch('/api/users');
+    const response = await fetch('/api/users');
+    const { status } = response;
     expect(status).to.be.eql(200);
+    const data = await response.json();
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(2);
   });
 
   it('fetch /api/users?a=b', async () => {
-    const { status, data } = await fetch('/api/users');
+    const response = await fetch('/api/users');
+    const { status } = response;
     expect(status).to.be.eql(200);
+    const data = await response.json();
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(2);
   });
 
   it('fetch /api/users with url parameters', async () => {
-    const { status, data } = await fetch('/api/users?name=John');
+    const response = await fetch('/api/users?name=John');
+    const { status } = response;
     expect(status).to.be.eql(200);
+    const data = await response.json();
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(1);
   });
 
   it('fetch /api/users with post parameters', async () => {
-    const { status, data } = await fetch('/api/users', {
+    const response = await fetch('/api/users', {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
@@ -41,33 +47,41 @@ describe('test fetch mock', () => {
         name: 'John',
       }),
     });
+    const { status } = response;
     expect(status).to.be.eql(200);
+    const data = await response.json();
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(1);
   });
 
   it('fetch /api/users/{userId}', async () => {
-    const { status, data } = await fetch('/api/users/123');
+    const response = await fetch('/api/users/123');
+    const { status } = response;
     expect(status).to.be.eql(200);
+    const data = await response.json();
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.property('userId', '123');
   });
 
   it('fetch /api/users/mockjs with mockjs', async () => {
-    const { status, data } = await fetch('/api/users/mockjs');
+    const response = await fetch('/api/users/mockjs');
+    const { status } = response;
     expect(status).to.be.eql(200);
+    const data = await response.json();
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(2);
   });
 
   it('fetch /api/users/mockjs with mockjs', async () => {
-    const { status, data } = await fetch('/api/users/mockjs');
+    const response = await fetch('/api/users/mockjs');
+    const { status } = response;
     expect(status).to.be.eql(200);
+    const data = await response.json();
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
@@ -88,7 +102,7 @@ describe('test fetch mock', () => {
   });
 
   it('put /api/users/123', async () => {
-    const { status, data } = await fetch('/api/users/123', {
+    const response = await fetch('/api/users/123', {
       method: 'PUT',
       headers: {
         'Content-Type': 'application/json',
@@ -97,7 +111,9 @@ describe('test fetch mock', () => {
         name: 'John2',
       }),
     });
+    const { status } = response;
     expect(status).to.be.eql(204);
+    const data = await response.json();
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.an('object');