---
# System prepended metadata

title: 'UUID, try catch'

---

六角體驗營
# Todolist RESTful API : 開發新刪修查的API - UUID安裝使用、try catch語法
> [todolist 流程圖](https://whimsical.com/todolist-restful-api-23MP3VDDa36quRCXUL4hEi)
> [todolist 線上架構](https://whimsical.com/todo-GDkQ2j9E6zwYsMUQbgdrv8)
> [codepen JS 小範例](https://codepen.io/hexschool/pen/OJWRqrN)

![](https://hackmd.io/_uploads/H1qygSnb6.png =80%x)

<br>

## postAPI 軟體安裝 - API測試工具
> [postman載點](https://www.postman.com/)

<br>

## 什麼是 UUID？
> 通用唯一識別碼(Universally Unique Identifier)
> [wiki解釋](https://zh.wikipedia.org/zh-tw/%E9%80%9A%E7%94%A8%E5%94%AF%E4%B8%80%E8%AF%86%E5%88%AB%E7%A0%81)
> 用以賦予變數獨一無二的 id，方便操控資料
 
#### 1. 格式
* 123e4567-e89b-12d3-a456-426655440000 * xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx

#### 2. 有不同版本，目前(2023/10)定義五個版本，版本合適性依情況不同 : 
 * 版本1 - 根據時間和節點ID（通常是MAC位址）生成。
 * 版本2 - 根據識別碼（通常是組或使用者ID）、時間和節點ID生成。
 * 版本3、版本5 - 透過對命名空間（namespace）識別碼和名稱進行雜湊生成確定性的UUID。
 * 版本4 - 使用隨機性或偽隨機性生成。
 
### UUID NPM 安裝流程
> [載點](https://www.npmjs.com/package/uuid) (目前支援至nodejs12+，2023/10/18)

#### 以下範例以**隨機 uuid (version 4)** 安裝
* #### STEP 1. npm init
  產生package.json
    ```terminal=
    npm init
    ```
* #### STEP 1. npm install
  
    ```terminal=
    npm install uuid --save
    ```
   安裝完觀察 package.json 是否產生資料 
    ```json=
     "dependencies": {
        "uuid": "^9.0.1"
      }
    ```
* #### STEP 2. create uuid
  依據不同syntax(語法)選擇不同方式 (ES6 or CommonJS)
  node.js 只支援 commomJS

    ```js=
    //ES6方法
    import { v4 as uuid } from 'uuid';
    uuid(); //'9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

    ------------------------------------------------

    //CommonJS方法(用於Node.js))
    const { v4: uuidv4 } = require('uuid');
    uuidv4(); //'1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed'
    ```
* #### STEP 3. terminal中啟用 nodemon 套件 執行檔案
  ```termial=
  nodemon app.js //檔案名稱
  ```
* #### STEP 4. 透過console觀察
    ```js=
    console.log(uuidv4());
    ```
    此時，terminal 已可監聽到生成的 uuidv4
    
    ![](https://hackmd.io/_uploads/r1cgJR2bT.png)
* #### STEP 5. 操作物件
    ```js=
    const todolist = {
        'name':'vincent',
        'list':[
            'shopping',
            'study',
            'dish'
        ],
        'id':uuidv4() //這邊使用uuidv4隨機產生id
    }

    console.log(todolist);

    // {
    //   name: 'vincent',
    //   list: [ 'shopping', 'study', 'dish' ],
    //   id: '0e630dd1-7313-458d-a719-56153daff6cb'
    // }
    ```



<br>

## try catch 捕捉錯誤異常行為
> 常用於維護，資料錯誤時，可回傳對應資訊
```js=
//POST請求傳遞到後端通常是字串格式，因此需透過JSON.parse解析成JSON格式
const obj=JSON.parse('{"title":"1234"}');
//{title:'1234'}
```

* 在try的部分若程式正確，則執行try內容
* 若在try的內容中有誤，則會捕捉後執行catch內容

 ### 以JSON.parse解析為例
  ```js=
  //1-1. 個別定義一組"正確"及"錯誤"的程式
  const objCorrect = JSON.parse('{"title":"1234"}');
  console.log(objCorrect);
  //{title: '1234'}
  
  
  //1-2. 錯誤程式會回傳錯誤訊息
  const objWrong = JSON.parse("{title}");
  console.log(objWrong);
  //Uncaught SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)
  // at JSON.parse (<anonymous>)
  // at <anonymous>:2:25
  ```
  
  * **正確的程式碼 -> 執行try中內容**
  ```js=
  //2-1.以下是捕捉正確程式碼
  try{ 
      const objCorrect = JSON.parse('{"title":"1234"}');
      console.log(objCorrect);
  }catch{
      console.log('資料錯誤');
  }

  //2-2. console回傳解析後的物件
  //{title:"1234"}

  ```
  * **捕捉錯誤的程式碼 -> 執行catch內容**
  ```js=
  //3-1.以下是捕捉正確程式碼
  try{ 
      const objWrong = JSON.parse("{title}");
      console.log(objWrong);
  }catch{
      console.log('資料錯誤');
  }

  //3-2. console回傳catch捕捉錯誤後的內容
  //資料錯誤

  ```
