發送請求會收到 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/yen-kg/pen/MWNRXod?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 / 答案 |
|:-:|:-------:|:---------------------------------------------------------------:|
| 1 | LinaChen |[Codepen](https://codepen.io/LinaChen/pen/qEBObgo)|
| 2 | Nocab |[Codepen](https://codepen.io/PeihanWang/pen/LEYpNPB?editors=1011)|
| 3 | 4chan |[Codepen](https://codepen.io/ijuolaqc-the-looper/pen/YPzyqwB)|
| 4 | 嚼勁先生 |[Codepen](https://codepen.io/James520284/pen/OPJyNWV)|
| 5 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/ogNjxVK)|
| 6 | Aaron 謝宗佑 |[Codepen](https://codepen.io/aaron-hsieh/pen/qEBOZEK)|
|7|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/NPWGrzz?editors=1111)|
| 8 |Noy(Toad)|[Codepen](https://codepen.io/MochiCodingPen/pen/wBvKGLd?editors=1010)|
| 9 |泊岸|[Codepen](https://codepen.io/qoq77416416/pen/azbvpGz?editors=0010)|
| 10 |Kaya|[Codepen](https://codepen.io/kayaribi/pen/ByaoWbg)|
| 11 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/mydeGjG?editors=1010)|
| 12 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/OPJMgEg)|
| 13 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/YPzWZqw)|
| 14 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/xbxOeew)|
| 15 | Toung | [Codepen](https://codepen.io/Toung/pen/emYREdp) |
| 16 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/KwKZOEB?editors=1011) |
| 17 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/XJWPvbv?editors=0011) |
| 18 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/KwpdGKL?editors=0010) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |