Axiosとは?

Promiseベースの非同期APIライブラリ

API URLの基本例は、

を発行することができる

📌 axios vs fetch

共通点
HTTPプロトコルによるサーバとの通信

ひかくひょう

📌 特長

オペレーティング環境によれば、ブラウザ内のXMLHttpRequestオブジェクトまたはノード.js上のhttp api

を使用

ES 6 API

を使用
変換

要求及び応答データ

HTTP要求キャンセル

HTTP要求と応答を自動的にJSON形式

に変更する

📌 使用方法

◼ HTTP Methods

クライアントは、Webサーバに対してユーザ要求の目的/種類の通知

を発行する.

GET

urlに存在するリソースの入力を要求

axios.get(url,[,config])

用途

サーバからデータを取得して表示

アドレスのクエリを利用して情報を伝達する

.

値/ステータス変更不可

例

// 예시 1
    import axios from 'axios';
    axios.get('https://my-json-server.typicode.com/zofqofhtltm8015/fs/user').then((Response)=>{
        console.log(Response.data);
    }).catch((Error)=>{
        console.log(Error);
    })

// 예시 1 결과
    [
      { id: 1, pw: '1234', name: 'JUST' },
      { id: 2, pw: '1234', name: 'DO' },
      { id: 3, pw: '1234', name: 'IT' }
    ]

// 예시 2
    // GET request for remote image
    axios({
      method: 'get',
      url: 'http://bit.ly/2mTM3nY',
      responseType: 'stream'
    })
      .then(function (response) {
        response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
      });

// 예시 3
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .finally(function () {
        // always executed
      });

POST

新規リソースの作成(create)

      axios.post("url주소",{
    	data객체
   },[,config])

の2番目のパラメータ

オブジェクトの文字伝達(本明細書に送信データの設定)

.

使用状況

ユーザが生成するファイル(ログイン、登録等)をサーバにアップロードする場合は

となる.

GETより安全

アドレスウィンドウに残りのクエリーがないため、

使用例

    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });

    axios.post("url", {
            username: "",
            password: ""
        })
        .then(function (response) {
             // response  
        }).catch(function (error) {
            // 오류발생시 실행
        }).then(function() {
            // 항상 실행
        });

DELETE

RESTベースのAPIプログラムでデータベースに格納されているコンテンツを削除する

axios.delete(URL,[,config]);

HTML FormタグのデフォルトサポートHTTPメソッドX

は、第2のパラメータX

を伝達する.

サンプルコード

    axios.delete("/thisisExample/list/30").then(function(response){
        console.log(response);
          }).catch(function(ex){
          throw new Error(ex)
    }

PUT

RESTベースのAPIプログラムでデータベースに格納されているコンテンツを更新する

axios.put(url[, data[, config]])

HTML FormタグのデフォルトサポートHTTPメソッドX

週目:データベースコンテンツの変更

例

    axios.put("url", {
            username: "",
            password: ""
        })
        .then(function (response) {
             // response  
        }).catch(function (error) {
            // 오류발생시 실행
        }).then(function() {
            // 항상 실행
        });