👏

WebApiをいろいろ試したbyVue3(随時更新)

2021/12/21に公開

はじめに

WebApi試してみた。
データが取れたことを確認することが目的になります。

前提

環境

  • axios
  • vue3
  • firebase cloud functions

事前準備

  • 環境設定の説明は割愛
  • 各APIはログインできる状態

内容

天気予報(OpenWeather)

<template>
</template>
<script>
import { onMounted } from "vue"
import axios from "axios"

export default ({
  setup () {
    onMounted(()=>{
      getWeather()
    })
    const getWeather=()=>{
      axios({
        url:'************',    //←cloud functions httpリクエスト
        method: 'get',
        headers: {
        },    
        params:{
        }
      })
      .then((res)=>{
        console.log('成功',res)
        weatherData.value=res.data
      })
      .catch((e)=>{
        console.log('失敗',e)
      })
    }
    return {
      getWeather
    }
  }
})
</script>
  • cloud functionsコード
const functions = require("firebase-functions");
const axios =require('axios')

exports.weather=functions.https.onRequest(async (req,res)=>{ 
  res.set('Access-Control-Allow-Origin', '*');
  axios({
    url:'https://api.openweathermap.org/data/2.5/weather',
    method: 'get',
    headers: {
    },    
    params:{
        q:'Osaka-shi',
        appid:'***************',  //←ApiKey入力
    }
  })
})
  • 結果(console.log)

Google Maps API

<template>
  <div>
    <h1>Google Map</h1>
    <div id="map" style="height:500px;width:800px;"></div>
  </div>
</template>
<script>
import { onMounted,ref } from "vue"
export default ({
  setup () {
    const map = ref()
    const apiKey = "*******"    //←ApiKey入力
    const script =document.createElement('script')
    script.src= `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly&language=ja&region=JP`;
    script.async=true
    onMounted(()=>{
      document.head.appendChild(script)
      const timer =setInterval(()=>{
        clearInterval(timer);
        map.value = new google.maps.Map(document.getElementById("map"), {
          zoom: 8,
          center: { lat: 34.70207, lng: 135.5244804 },
        })
      },500)
    })
    return {
      map,
    }
  }
})
</script>
  • 結果

lineで送信

<template>
<button @click="submit">line送信</button>
</template>
<script>
import axios from "axios"

export default ({
  setup () {
    const submit=()=>{
      axios({
        url:"http://*********", 
      })
    }
    return {
      submit
    }
  }
})
</script>
  • cloud functionsコード
const functions = require("firebase-functions");
const axios =require('axios')

exports.lineSubmit=functions.https.onRequest(async (req,res)=>{
  res.set('Access-Control-Allow-Origin', '*');
  LINE_TOKEN='****************'  //←アクセストークン入力

  axios({
    url:"https://notify-api.line.me/api/notify",
    method:'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': `Bearer ${LINE_TOKEN}`,
    },
    params:{
      message: '送信',
    },
  })
  .then(()=>{
    console.log('成功')
    res.send('成功')
  })
  .catch((e)=>{
    console.log('失敗',e)
    res.end(e)
  })
})
  • 結果
    lineに送信

Discussion