六角體驗營 # 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)  <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  * #### 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捕捉錯誤後的內容 //資料錯誤 ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up