Vue.js勉強記録その29 外部サービスを利用しよう 6-1 ver1
こちらの書籍で勉強中です。
今回は、axiosを使って外部サイトにアクセスします。
■axiosで外部サイトにアクセス！
・axiosのインストール
axiosとは、外部のサイトにHTTP通信するためのパッケージです。使うには、まずaxiosのインストールする必要があります。
npm install axios・基本的な使い方
import axios from "axios";インポートします。
変数 = await axios.get(アドレス)こんな感じでデータを取得します。
・同期処理と非同期処理
同期処理は、一つずつ処理を進めていき、一つの処理が終わったら次の処理というように、順番に処理していく。
非同期処理は、処理が並行して行われ、一つの処理が終わるのを待たない。
非同期処理の中でawaitは、「処理が終わるまで待って」という意味。つまりawaitは、非同期処理だけど、同期処理的に行うという意味。このawaitを使う場合は、asyncと合わせて使う必要がある。
async 関数 （引数）{
await 非同期処理
}このように書くと、非同期処理の処理が終わるのを待って、次の処理に進むようになる。
・テキストファイルを表示する
publicフォルダに、data.txtとうファイルを作成し、適当にテキストを書いておきます。
このテキストファイルを読み込んで、中の文字を表示してみようと思います。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>bootstrapの読み込みをしていきます。
App.vue
<template>
<HelloWorld />
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld,
},
};
</script>コンポーネントHelloWorldを呼び出しています。
HelloWorld.vue
<template>
<section class="alert alert-primary">
<h1>{{ data.title }}</h1>
<p>{{ data.message }}</p>
<textarea v-model="data.mydata" rows="5" class="form-control"></textarea>
</section>
</template>
<script>
import axios from "axios";
import { reactive, onMounted } from "vue";
const url = "/data.txt";
export default {
setup(props) {
const data = reactive({
title: "Axios",
message: "This is axios sample.",
mydata: "",
});
const getData = async () => {
let result = await axios.get(url);
data.mydata = result.data;
};
onMounted(() => {
getData();
});
return { data, getData };
},
};
</script>メソッドgetDataで、axiosを使ってデータを読み込んでいます。そのgetDataを、onMountedで呼び出しています。
この状態は、本来なら非同期のはずの処理を、同期処理のように、一つの処理が終わるのを待ってから次の処理を行う感じになっています。
非同期の書き方に変更変更してみます。
axios.get(アドレス).then((引数)=>{
完了後の処理
})こんな感じで、非同期処理が終わってからの処理を、thenで書きます。
HelloWorld.vueを書き直します。
const getData = () => {
const url = "/data.txt";
axios.get(url).then((result) => {
data.mydata = result.data;
});
};これで非同期の処理になります。
■まとめ
今回から、外部データの取得です。これが出来ると色々なデータにアクセスできるようです。
ただ、クロスドメインの問題が無くなるわけじゃなさそうなので、何でもかんでもアクセス出来るわけじゃなさそうです。PHPなどを併用して使う感じなのかな？という印象です。
この記事が気に入ったらサポートをしてみませんか？