Vue で Axios 非同期リクエスト API を使用する方法

axiosnpm をインストールする axios をインストールする

//App.view - axios をインポートする
<スクリプト>
'axios' から axios をインポートします

エクスポートデフォルト{
  設定 （） {

    }
}
</スクリプト>

//App.vue - HTTPリクエストを送信する
<スクリプト>
'axios' から axios をインポートします

エクスポートデフォルト{
  設定 （） {
     axios.get('https://api.kanye.rest/').then(レスポンス => {
        // 応答を処理する
     })
  }
}
</スクリプト>

//App.vue - レスポンスの保存
<スクリプト>
'axios' から axios をインポートします
'vue' から { ref } をインポートします

エクスポートデフォルト{
  設定 （） {
     axios.get('https://api.kanye.rest/').then(レスポンス => {
        // 応答を処理する
        quote.value = 応答
     })
     戻る {
      引用
     }
  }
}
</スクリプト>

//App.vue - テンプレートコード
<テンプレート>
  <div>
    <i>「{{ 引用 }}」</i>
    - カニエ・ウェスト
  </div>
</テンプレート>

//App.vue - 見積もりの​​み取得
axios.get('https://api.kanye.rest/').then(レスポンス => {
        // 応答を処理する
        quote.value = レスポンスデータ.quote
})

//App.vue - 非同期 Axios
const loadQuote = 非同期() => {
      const レスポンス = KanyeAPI.getQuote() を待機
      quote.value = レスポンスデータ.quote
}

//async/await によるエラー処理
試す {
        const レスポンス = KanyeAPI.getQuote() を待機
        quote.value = レスポンスデータ.quote
} キャッチ (エラー) {
        コンソール.log(エラー)
}

//Promise によるエラー処理
api.kanye.rest の取得
      .then(応答 => {
        // 応答を処理する
        quote.value = レスポンスデータ.quote
      }).catch(エラー => {
      コンソール.log(エラー)
})

  <div>
    <i>「{{ 引用 }}」</i>
    - カニエ・ウェスト
    <p>
      <button @click="createPost">投稿を作成</button>
    </p>
  </div>
</テンプレート>

//アプリ.vue
定数createPost = () => {
      axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
          タイトル: 'foo',
          本文: 'バー',
          ユーザーID: 1,
      })）。その後(応答 => {
        console.log(応答)
      })
}

API.js は 'axios' から axios をインポートします

エクスポートデフォルト(url='https://api.kanye.rest') => {
    axios.create({ を返す
        ベースURL: URL、
    })
}

//カニエAPI.js
'./API' から API をインポートします

エクスポートデフォルト{
    引用を取得（）{
        API().get('/') を返します
    },
}

//アプリ.vue
const loadQuote = 非同期() => {
      試す {
        const response = await KanyeAPI.getQuote() // <--- この行
        quote.value = レスポンスデータ.quote
      } キャッチ (エラー) {
        コンソール.log(エラー)
      }
}

//カニエAPI.js
エクスポートデフォルト{
    引用を取得（）{
        API().get('/') を返します
    },
    ポストデータを作成します。
        API('https://jsonplaceholder.typicode.com/').post('/posts', data) を返します。
    }
}

//アプリ.vue
 定数createPost = () => {
      const レスポンス = KanyeAPI.createPost(JSON.stringify({
          タイトル: 'foo',
          本文: 'バー',
          ユーザーID: 1,
      }))

      console.log(応答)
}

// アプリ.vue
<テンプレート>
  <div>
    <i>「{{ 引用 }}」</i>
    - カニエ・ウェスト
    <p>
      <button @click="createPost">投稿を作成</button>
    </p>
  </div>
</テンプレート>

<スクリプト>
'axios' から axios をインポートします
'vue' から { ref } をインポートします
'./services/KanyeAPI' から KanyeAPI をインポートします
エクスポートデフォルト{
  設定 （） {

    const 引用 = ref('')

    const loadQuote = 非同期() => {
      試す {
        const レスポンス = KanyeAPI.getQuote() を待機
        quote.value = レスポンスデータ.quote
      } キャッチ (エラー) {
        コンソール.log(エラー)
      }
    }

    引用を読み込む()

        // axios.get('https://api.kanye.rest/')
    // .then(レスポンス => {
    // // 応答を処理する
    // quote.value = response.data.quote
    // }).catch(エラー => {
    // コンソール.log(エラー)
    // })

    定数createPost = () => {
      const レスポンス = KanyeAPI.createPost(JSON.stringify({
          タイトル: 'foo',
          本文: 'バー',
          ユーザーID: 1,
      }))

      console.log(応答)
      // axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
      // タイトル: 'foo',
      // 本体: 'バー',
      // ユーザーID: 1,
      // })).then(レスポンス => {
      // console.log(応答)
      // })

          }

        戻る {
      投稿を作成、
      引用
    }
  }
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

//API.js
'axios' から axios をインポートします

エクスポートデフォルト(url='https://api.kanye.rest') => {
    axios.create({ を返す
        ベースURL: URL、
    })
}

//カニエAPI.js
'./API' から API をインポートします
エクスポートデフォルト{
    引用を取得（）{
        API().get('/') を返します
    },
    ポストデータを作成します。
        API('https://jsonplaceholder.typicode.com/').post('/posts', data) を返します。
    }
}