AxiosによるHTTPリクエスト

APIとの通信

Axiosのインストール

npm install axios

Axiosのインポート

import axios from "axios"

GETリクエスト

axios.get("https://api.example.com/users")
  .then(response => {
    console.log(response.data)
  })

POSTリクエスト

axios.post("https://api.example.com/users", {
  name: "Grace",
  email: "grace@example.com"
})

async/awaitの使用

async function loadUsers() {
  const response = await axios.get("/api/users")
  return response.data
}

Vueのメソッド内での使用

export default {
  data() {
    return { users: [] }
  },
  methods: {
    async fetchUsers() {
      const res = await axios.get("/api/users")
      this.users = res.data
    }
  }
}

リクエスト設定：クエリパラメーター

axios.get("/api/users", {
  params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10

リクエスト設定：ヘッダー

axios.get("/api/profile", {
  headers: {
    Authorization: "Bearer " + token
  }
})

ベースURLの設定

import axios from "axios"

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" }
})

// elsewhere: api.get("/users")

その他のHTTPメソッド

api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")

理解度チェック

まとめ