axios catch

一般是寫 .catch((err) => {console.log(err);}

這樣只會看到 http status 的錯誤,不能取得 response。那該怎麼取得 error response 呢?axios 文件有寫了,用 err.response: https://github.com/axios/axios#handling-errors

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);    // 取得內容,用 error.response.data
      console.log(error.response.status);  // 取得狀態碼,用 error.response.status
      console.log(error.response.headers); // 取得表頭,用 error.response.headers
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

TypeScript 學習筆記(2) – Type annotation/Interface/Class

以下是看 Quick start 的紀錄:

  • Type annotation:一般動態語言是沒型別的,但 TypeScript 加上了這部份的支援,這可以讓開發者在編譯時期就預先發現型別錯誤,也可以編譯出更有效率的程式,讓程式執行的更快。語法像是 Go 或 Pascal (知道這語言的人應該不多了),是在變數後面加上 :type,例如:
    var str:string="hello world";
  • Interface:介面,沒啥特別的,看範例比較快
    interface Person {
        firstName: string;
        lastName: string;
    }
    
    function greeter(person: Person) {
        return "Hello, " + person.firstName + " " + person.lastName;
    }
    
    var user = { firstName: "Jane", lastName: "User" };
    
  • Class:大致上跟 java 的用法相似,不過在看到 QuickStart 範例時,還是驚訝了一下,主要是因為 TypeScript 語法並沒有明確指定類別實作了 Person 介面,但這個類別所產生的物件仍可以直接丟到只接介面的函式裡。後來仔細看了一下,才知道是因為 TypeScript 的 constructor (建構子)裡的參數加了 public,那麼會自動將這個參數放到同名的屬性去,也因此就符合了 Person 介面的要求。
    class Student {
        fullName: string;
        // 這裡的 public firstName,等同是函式裡有 this.firstName=firstName
        constructor(public firstName, public middleInitial, public lastName) {
            this.fullName = firstName + " " + middleInitial + " " + lastName;
        }
    }
    
    // 故意不要有 lastName
    class Employee {
        constructor(public firstName) {
        }
    }
    
    interface Person {
        firstName: string;
        lastName: string;
    }
    
    // 因為 Student 裡有 firstName, lastName 屬性,視同實作了 Person
    function greeter(person : Person) {
        return "Hello, " + person.firstName + " " + person.lastName;
    }
    
    var user = new Student("Jane", "M.", "User");
    var employee = new Employee("John");
    console.log(greeter(user));
    // console.log(greeter(employee));  // 加了這行,編譯會發生錯誤,告知 employee 不符合 Person 介面
    

TypeScript 學習筆記(1) – 安裝與執行

我習慣用的環境是 Ubuntu,目前用的是 16.04 Xenial。

第一步是安裝,安裝 nodejs 有幾種方法:

  1. nodejs.org 下載 tarball,手動安裝。
  2. 用 debian package 來安裝 (nodesource)
  3. 用 nvm 來安裝

之前有用過 nvm 了,這次我選擇用 debian package 來安裝 LTS 版的 nodejs。

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

安裝好,就可以利用 npm 來安裝 TypeScript 了。不過,因為我不想把 typescript 安裝在系統路徑 (一般是用 sudo npm install -g typescript),所以我多設定了 .npmrc 以及環境變數

prefix = /home/user/.local
root = /home/user/.local/lib/node_modules
binroot = /home/user/.local/bin
manroot = /home/user/.local/share/man

 

export LOCAL_PATH="$HOME/.local"
export MANPATH="$LOCAL_PATH/share/man:$MANPATH"
export NODE_PATH="$LOCAL_PATH/lib/node_modules:$NODE_PATH"
export PATH="$LOCAL_PATH/bin:$PATH"

 

在設定好以後,使用 npm install -g 時,會將這些套件安裝到自己的 $HOME/.local 目錄下。

在使用 npm install -g typescript 以後,我另外安裝了去年推出的 yarn。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt install yarn

 

首先寫一個 hello.ts

console.log("Hello world.");

然後用 tsc 來將 hello.ts 編譯為 hello.js: tsc hello.ts ,最後就可以用 node 執行 hello.js 印出 “Hello world.”

docker-hackmd relative url

hackmd 是一個很棒的協作平台,你可以用 markdown 來撰寫文件,graphviz/flowchart 等語法來畫圖…很厲害。

安裝上也蠻簡單的,已經有人做好 Dockerfile :hackmdio/docker-hackmd: docker hackmd image

可是這個 docker image 有個問題,就是沒辦法以 relative url 存在,他預設是在根目錄下運作,有個日本人弄出來了:HackMDをnginxで / 以外のlocationで起動する。 – Qiita ,我參考他的設定,做了調整,加入 nginx 設定與 upstart 設定,放在 elleryq/docker-hackmd: docker hackmd image

大致調整以下東西:

  1. nginx 設定:加入 rewrite,將路徑改寫為 /hackmd,這可以參考 nginx.conf.example
  2. common.js:因為 hackmd 用到 websocket ,common.js 的 urlpath 也要跟著調整,否則會無法運作,裏面的 urlpath 需要修改為 /hackmd。這部份我寫在 hackmd/Dockerfile 裡,在用 git clone 取得 hackmd 原始碼以後,用 sed 去做字串的替換。
  3. upstart:upstart.hackmd.conf 裡是用 docker-compose 啟動 hackmd image ,這邊我預期 docker-compose.yml 是放在 /srv/docker-hackmd ,如果你預期不放在這兒,那麼這邊也要跟著調整。

應該大概就這些,如果有沒提到的,就看原始碼吧~

nodeschool.io expressworks

最近看到 nodeschool.io ,所以就照著說明來上 expressworks 的課。

首先就是要安裝:npm install -g expressworks workshopper-exercise

接著建立一個目錄,作為練習用,例如 expressworks_practice ,然後在該目錄下安裝 express jade :npm install express jade

最後就可以練習了,要練習,就是輸入 expressworks,就可以看到選單,選定項目後,會有題目的說明。

以下是你可用的指令:

  • 執行程式並自動驗證:expressworks run program.js
  • 執行:node program.js
  • 檢查:expressworks verify program.js
  • 顯示題目說明:expressworks print
  • 顯示選單:expressworks

但要注意的是,expressworks 似乎是用關鍵字來檢查程式,所以有可能用 node 執行時會有錯誤發生,但 expressworks 卻告訴你通過了的情況。

AngularJS 起手式

我是參考這篇教學:Learn to Build Modern Web Apps with the AngularJS Tutorial

教學裡使用的是 yeoman ,這真的有方便。首先要安裝 nodejs 跟 npm,在 Ubuntu 13.10 裡,就用 sudo apt-get install nodejs npm 就行了,如果是 Ubuntu 12.04,得另外裝 chris lea 的 PPA,再 update/install。教學裡的第一步,就是安裝 yeoman,用 sudo npm install -g yo 來安裝,可是我不太喜歡直接裝到 /usr 系統資料夾去,所以找了一下,看能不能像 Python 的 pip install xxx –user 一樣裝到使用者目錄下。

搜尋的結果是可以的,但需要做些設定。設定值大致如下:

這樣就可以不用 sudo,然後用 npm install yo 就可以把相關模組都裝到使用者目錄下了,而且相關的指令也都可以用。

參考資料: