接續昨天的練習，發送請求會收到 response，此時可以透過彈出視窗將登入結果呈現在畫面中給使用者，今天會練習使用 SweetAlert 套件，使用 axios 發送請求並將 response 顯示在 SweetAlert。

參考[文件](https://sweetalert2.github.io/#download)加入 CDN

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

接下來加入 sweetAlert2-function 就會顯示出彈出視窗囉！

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
})

可以參考[文件 Configuration](https://sweetalert2.github.io/#configuration)設定客製化內容，如：`confirmButtonColor: 'blue'`，可以更改確認按鈕的顏色。

將在 API 接收到的 response 呈現在 SweetAlert 彈出視窗。

axios.get('API_URL', {
  headers: {
    'Authorization': `token ${access_token}`
  }
})
.then((res) => {
Swal.fire({
  title: '資料取得成功',
  text: res.data,
  icon: 'success',
  showConfirmButton: false,
  timer: 1500
})
})
.catch((error) => {
  console.error(error)
})

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/Yzajdpo?editors=1010)，延續昨天的練習，在點擊『取得資料』按鈕時，使用 SweetAlert 顯示『資料取得成功』『資料取得失敗』。

API: `https://livejs-api.hexschool.io/api/livejs/v1/admin/react-practice/orders`
token: `rqqWQlTafiYotxQ8x3dy3BGt0ES2`

如範例圖：

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

解答一：
axios.get('https://livejs-api.hexschool.io/api/livejs/v1/admin/react-practice/orders',
{
  headers: {
    'Authorization': 'rqqWQlTafiYotxQ8x3dy3BGt0ES2'
  }
})
.then(function (response) {
  Swal.fire({
   title: '資料取得成功',
   icon: 'success',
   showConfirmButton: false,
   timer: 1500
  })
})
.catch(function (err) {
  Swal.fire({
   title: '資料取得失敗',
   icon: 'error',
   showConfirmButton: false,
   timer: 1500
  })
})

解答二：
axios.defaults.headers.common['Authorization'] = `rqqWQlTafiYotxQ8x3dy3BGt0ES2`;
axios.get('https://livejs-api.hexschool.io/api/livejs/v1/admin/react-practice/orders')
.then(function (response) {
  Swal.fire({
   title: '資料取得成功',
   icon: 'success',
   showConfirmButton: false,
   timer: 1500
  })
})
.catch(function (err) {
  Swal.fire({
   title: '資料取得失敗',
   icon: 'error',
   showConfirmButton: false,
   timer: 1500
  })
})

-->

回報區
---

| # | Discord | CodePen / 答案 |
|:-:|:-------:|:---------------------------------------------------------------:|
| 01 | 金魚 | [CodePen](https://codepen.io/cso-goldfish/pen/KKbMqmm)|
| 02 | Billy.Ji |[Codepen](https://codepen.io/yaj55ushydna/pen/xxmObwK)|
| 03 | David0799 |[Codepen](https://codepen.io/David0799/pen/QWzEgvd)|
| 04 | Wei_Rio |[Codepen](https://codepen.io/wei_wu/pen/WNLxOBZ)|
| 05 | shcopy |[Codepen](https://codepen.io/shcopy/pen/PoXzKPp)|
| 06 | yuchih | [Codepen](https://codepen.io/hijachu/pen/YzdWxPw?editors=1011) |
| 07 | Aden | [Codepen](https://codepen.io/Osases/pen/KKbMvQr) |
| 08 | Aya |[Codepen](https://codepen.io/NoNameNote/pen/YzdWxeN)|
| 09 | Kaya | [Codepen](https://codepen.io/laron9486/pen/poqbrKG) |
| 10 | LinaChen |[Codepen](https://codepen.io/LinaChen/pen/wvRGZdm)|
| 11 | Wendy3 |[Codepen](https://codepen.io/wendy03/pen/wvRWPJM)|
| 12 | Ataraxia |[Codepen](https://codepen.io/ataraxia8888/pen/xxmOOKj)|
| 13 | smalljie |[Codepen](https://codepen.io/smalljie/pen/WNLxXZR)|
| 14 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/ExGyoBP?editors=1011) |
| 15 | rainnping |[Codepen](https://codepen.io/rainnping/pen/wvRWyPZ)|
| 16 | 地球儀 |[Codepen](https://codepen.io/dayday1222/pen/abPZqRL?editors=1010)|
| 17 | cataska |[Codepen](https://codepen.io/lovecankill/pen/YzdWedO)|
| 18 | Yen |[Codepen](https://codepen.io/TZU-HUANG-YEN/pen/vYvKdVV?editors=1010)|
| 19 | 喃喃 |[Codepen](https://codepen.io/VeLario/pen/rNoLePw?editors=0010)|
| 20 | collinkao | [Codepen](https://codepen.io/collin0825/pen/PoXzarr?editors=1010)
| 21 | 羅羅 |[Codepen](https://codepen.io/bjqs02/pen/MWZeBVO)|
| 22 | 瑀君 |[Codepen](https://codepen.io/yennnnn/pen/gOZMyZX?editors=1010)|
| 23 | 小明#4408 |[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/YzdGyJm?editors=0010)|
| 24 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/YzdGygK) |
| 25 | curry | [codePen](https://codepen.io/Ted19851223/pen/yLGJXpP?editors=1010) |
| 26 | Ingrid | [codePen](https://codepen.io/ingrid-chi/pen/mdarvGK?editors=0011) |
| 27 | Iris | [codePen](https://codepen.io/iris831206/pen/QWzdaVg?editors=1010) |
| 28 | PollyPO_Lee | [codePen](https://codepen.io/pollypo1986/pen/mdaXpWJ) |
| 29 | Cami | [codePen](https://codepen.io/fayevivi/pen/WNLJZOd?editors=0010) |
| 30 | Lydia | [codePen](https://codepen.io/lydia-chen/pen/MWMJvaj?editors=1011) |

* 快速複製

|  |  |[Codepen]()|