axios - 駆け出しのエンジニア日記

axios・・・

HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptの外部ライブラリです。

今回はaxiosについて簡単にまとめてみます。

npmインストール

$ npm install axios

CDNでの利用（scriptの行）

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Axios</title>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
 <script src="app.js"></script>
</body>
</html>

今回はCDNの方で行います。

使い方

axios.get(url)メソッド・・・

HTTP通信(API通信)でサーバーからデータを取得するには、axios.get()関数を使用することで実現可能です。

早速サンプルを書いてみます。

axios.get('https://api.tvmaze.com/search/shows?q=girls')
 .then(res => {
 console.log(res.data);
 })
 .catch(e => {
 console.log('エラー！！', e);
 })

またPromiseを返すのでasyncとawaitで記述も可能です。

const fetchTvScore = async () => {
 try {
 const res = await axios.get('https://api.tvmaze.com/search/shows?q=girls');
 console.log(res.data);
 } catch (e) {
 console.log('エラー！！', e);
 }
}
fetchTvScore();

※fetchとの大きな相違点はJSONを呼ばなくても使えることです。

他にも、

axios.post()メソッド・・・データをサーバーへ情報を送るときに使用

他にもdeleteやputもありますが、まずは使い方を紹介できればと思いました。

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

上記も参考にしてみてください。