// 一個模擬的非同步函式
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
關鍵字用於定義一非同步函式,這個函式將回傳一個 Promiseasync
函式內部,可以使用 await
關鍵字來等待一個 Promise 被解析(resolved)。await
,他可以讓程式碼看起來像同步的,它會暫停此 async 函式的執行,並且等待解析,解析完之後會回傳解析值,並繼續此 async 函式的執行。// 傳統 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("加入購物車成功");
};**
// 自訂錯誤
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}`);
}
// 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("加入購物車時發生錯誤,請稍後再試。");
}
};
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up