Try   HackMD

第三堂:axios 搭配 Async/Await 再進化

課程大綱

  1. 基本 Promise 與 Async/Await 比較
    1. 1 個觀念 - 20min
  2. 錯誤管理
    1. 1 個觀念 - 20min
  3. axios 搭配 Async/Await 錯誤管理整合
    1. 1 個觀念 - 20min

1. 基本 Promise 與 Async/Await 比較

// 一個模擬的非同步函式
function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("資料已經獲取");
        }, 2000);
    });
}

// 傳統寫法
// 使用 Promise 的 .then() 方法來處理非同步操作
function getDataWithThen() {
    console.log("開始獲取資料...");
    fetchData().then((data) => {
        console.log(data); // 會在 2 秒後輸出 "資料已經獲取"
    });
}

getDataWithThen();

// 使用 Async/Await 的作法
async function getData() {
    console.log("開始獲取資料...");
    const data = await fetchData();
    console.log(data); // 會在 2 秒後輸出 "資料已經獲取"
}

getData();

使用 async await:提升可讀性、減少複雜性

async/await 是 JavaScript 中用於處理非同步的一種語法糖,讓程式碼更好理解

  • async 關鍵字用於定義一非同步函式,這個函式將回傳一個 Promise
  • async 函式內部,可以使用 await 關鍵字來等待一個 Promise 被解析(resolved)。
  • async 函式內部可以使用 await ,他可以讓程式碼看起來像同步的,它會暫停此 async 函式的執行,並且等待解析,解析完之後會回傳解析值,並繼續此 async 函式的執行。

axios 寫法如下

// 傳統 axios 寫法
const api_path = "自訂路徑"; 

// GET
****const getProductList = () => {
  axios.get(`https://livejs-api.hexschool.io/api/livejs/v1/customer/${api_path}/products`)
    .then(response **=> {**
	     console.log(response.data.products);
    })
    
};

// POST
function addCartItem(id){
  axios.post(`https://livejs-api.hexschool.io/api/livejs/v1/customer/${api_path}/carts`,{
    data: {
      productId: id,
      quantity: 1
    }
  }).
    then(function (response) {
      alert("加入購物車成功");
      
    })

}

// async / await 寫法
**// GET
const getProductList = async () => {**
    const response = **await** axios.get(`https://livejs-api.hexschool.io/api/livejs/v1/customer/${api_path}/products`);
**};

// POST
const addCartItem = async (id) => {
    const response = await axios.post(`https://livejs-api.hexschool.io/api/livejs/v1/customer/${api_path}/carts`, {
        data: {
            productId: id,
            quantity: 1
        }
    });

    
    alert("加入購物車成功");
};**

2. 錯誤處理

// 自訂錯誤
const a = new Error("姓名欄位沒有填寫")
[a.name](http://a.name/) = "驗證失敗"

try{
    throw a;
}catch(error){

    console.log(error)
}

// SyntaxError 錯誤

try {
    // 缺少閉合括號
    let x = (10 + 5;
} catch (error) {
    console.error(`${error.name}: ${error.message}`);
}

// ReferenceError 引用了一個不存在的變數
try {
    console.log(nonExistentVariable); // 變數未定義
} catch (error) {
    console.error(`${error.name}: ${error.message}`);
}

3. axios 搭配 Async/Await 錯誤管理整合

// async / await 寫法
// GET
const api_path = "自訂路徑";
const getProductList = async () => {
    try {
        const response = await axios.get(`https://livejs-api.hexschool.io/api/livejs/v1/customer/${api_path}/products`);
        console.log(response)
    } catch (error) {
        console.error("取得產品列表失敗", error.response.data);
        alert("取得產品列表時發生錯誤,請稍後再試。");
    }
};

// POST
const addCartItem = async (id) => {
    try {
        const response = await axios.post(`https://livejs-api.hexschool.io/api/livejs/v1/customer/${api_path}/carts`, {
            data: {
                productId: id,
                quantity: 1
            }
        });

        console.log(response)
        alert("加入購物車成功");
    } catch (error) {
        console.error("加入購物車失敗", error.response.data);
        alert("加入購物車時發生錯誤,請稍後再試。");
    }
};