Add HttpClient (#31)

* feat: remove avet-init * feat: add httpclient
avetjs · Dec 28, 2017 · 19646dc · 19646dc
1 parent 8b5d738
commit 19646dc
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 14 deletions.
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "avet-example-egg",
+  "name": "avet-example-simple",
   "version": "1.0.0",
-  "description": "this is a avet and egg example",
+  "description": "this is a avet example",
   "private": true,
   "scripts": {
     "start": "NODE_ENV=production EGG_SERVER_ENV=prod node index.js",

diff --git a/examples/simple/web/page/index.js b/examples/simple/web/page/index.js
@@ -2,9 +2,9 @@ import React from 'react';
 import Header from '../component/header';
 
 class IndexPage extends React.Component {
-  static async getInitialProps() {
-    // const res = await httpclient.get('/api/getHello');
-    return { hello: 'dddd' };
+  static async getInitialProps({ httpclient }) {
+    const res = await httpclient.get('/api/getHello');
+    return { hello: res.data };
   }
 
   render() {

diff --git a/packages/avet-client/src/head-manager.js b/packages/avet-client/src/head-manager.js
@@ -31,7 +31,7 @@ export default class HeadManager {
 
     this.updateTitle(tags.title ? tags.title[0] : null);
 
-    const types = ['meta', 'base', 'link', 'style', 'script'];
+    const types = [ 'meta', 'base', 'link', 'style', 'script' ];
     types.forEach(type => {
       this.updateElements(type, tags[type] || []);
     });

diff --git a/packages/avet-client/src/index.js b/packages/avet-client/src/index.js
@@ -7,6 +7,7 @@ import App from 'avet-shared/lib/app';
 import { getURL } from 'avet-shared/lib/utils';
 import PageLoader from 'avet-shared/lib/page-loader';
 import { loadGetInitialProps } from 'avet-utils/lib/component';
+import { getHttpClient } from 'avet-shared/lib/httpclient';
 
 // Polyfill Promise globally
 // This is needed because Webpack2's dynamic loading(common chunks) code
@@ -51,9 +52,10 @@ let stripAnsi = s => s;
 
 export const emitter = new EventEmitter();
 
-export default async (
-  { ErrorDebugComponent: passedDebugComponent, stripAnsi: passedStripAnsi } = {}
-) => {
+export default async ({
+  ErrorDebugComponent: passedDebugComponent,
+  stripAnsi: passedStripAnsi,
+} = {}) => {
   // Wait for all the dynamic chunks to get loaded
   for (const chunkName of chunks) {
     await pageLoader.waitForChunk(chunkName);
@@ -151,6 +153,7 @@ async function doRender({
       err,
       pathname,
       query,
+      httpclient: getHttpClient(),
       asPath,
     });
   }

diff --git a/packages/avet-init b/packages/avet-init
diff --git a/packages/avet-server/lib/render.js b/packages/avet-server/lib/render.js
@@ -10,6 +10,7 @@ const App = require('avet-shared/lib/app').default;
 const ErrorDebug = require('avet-shared/lib/error-debug').default;
 const { flushChunks } = require('avet-shared/lib/dynamic');
 const xssFilters = require('xss-filters');
+const { getHttpClient } = require('avet-shared/lib/httpclient');
 
 const {
   resolvePath,
@@ -137,6 +138,7 @@ async function doRender(
   const _ctx = {
     ctx,
     asPath,
+    httpclient: getHttpClient(ctx),
     pathname: ctx.path,
     query: ctx.query,
     err,

diff --git a/packages/avet-shared/package.json b/packages/avet-shared/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "ansi-html": "^0.0.7",
     "avet-utils": "1.0.0-16",
+    "axios": "^0.17.1",
     "htmlescape": "^1.1.1",
     "http-status": "^1.0.1",
     "path-to-regexp": "^2.1.0",

diff --git a/packages/avet-shared/src/httpclient.js b/packages/avet-shared/src/httpclient.js
@@ -0,0 +1,29 @@
+import axios from 'axios';
+
+function getBaseURL(ctx) {
+  if (ctx) {
+    let port = '7001';
+    if (process.env.NODE_ENV === 'production') {
+      port = process.env.PORT;
+    }
+    return `http://127.0.0.1:${port}`;
+  } else {
+    return document.location.origin;
+  }
+}
+
+export function getHttpClient(ctx, options = {}) {
+  if (ctx) {
+    const { headers } = ctx.request;
+    Object.keys(headers).forEach(key => {
+      axios.defaults.headers.common[key] = headers[key];
+    });
+  }
+
+  const baseURL = getBaseURL(ctx);
+  axios.defaults.baseURL = baseURL;
+
+  Object.assign(axios, options);
+
+  return axios;
+}
diff --git a/packages/avet-shared/src/router/router.js b/packages/avet-shared/src/router/router.js
@@ -251,8 +251,8 @@ export default class Router {
 
   onlyAHashChange(as) {
     if (!this.asPath) return false;
-    const [oldUrlNoHash] = this.asPath.split('#');
-    const [newUrlNoHash, newHash] = as.split('#');
+    const [ oldUrlNoHash ] = this.asPath.split('#');
+    const [ newUrlNoHash, newHash ] = as.split('#');
 
     // If the urls are change, there's more than a hash change
     if (oldUrlNoHash !== newUrlNoHash) {
@@ -270,7 +270,7 @@ export default class Router {
   }
 
   scrollToHash(as) {
-    const [, hash] = as.split('#');
+    const [ , hash ] = as.split('#');
     const el = document.getElementById(hash);
     if (el) {
       el.scrollIntoView();
@@ -302,7 +302,7 @@ export default class Router {
 
   async fetchComponent(route, as) {
     let cancelled = false;
-    const cancel = (this.componentLoadCancel = function () {
+    const cancel = (this.componentLoadCancel = function() {
       cancelled = true;
     });