題記

? ? ? ? ?用vue調(diào)用第三方接口，以下是全部代碼和操作流程。

尋找第三方接口網(wǎng)站?

????????推薦：免費(fèi)API - 提供免費(fèi)接口調(diào)用平臺 (aa1.cn)

? ? ? ? 下面的代碼以下圖中的接口為例?

?????????

安裝axios模塊?

? ? ? ? 在終端輸入以下命令：?

?????????npm install axios

?調(diào)用第三方接口代碼

?調(diào)用不需要設(shè)置參數(shù)的接口

? ? ? ? TestView.vue文件如下：?

<template>

? <div >

? ? <ul>

? ? ??<!--<li v-for="item in items" :key="item.id">{{ item }}</li>-->

? ? ? <!--使用了Vue的指令v-html，它會將組件的data屬性的值作為HTML內(nèi)容進(jìn)行渲染-->

? ? ? <div v-html="data"></div>

? ? ? <!--使用了Vue的插值語法{{ }}，它會將組件的data屬性的值作為文本進(jìn)行渲染-->

? ? ? <!--沒有去掉p標(biāo)簽-->

? ? ? <div>{{ data }}</div>

? ? </ul>

? </div>

</template>

<script>

// 導(dǎo)入axios模塊，使用axios來發(fā)送HTTP請求了

//export default是用于導(dǎo)出模塊的語法

import axios from 'axios';

// const data = ref()

// const ?items = ref([])

export default {

? //data()函數(shù)是用于定義組件的數(shù)據(jù)屬性的方法

? //data屬性被初始化為空字符串，可以用來存儲數(shù)據(jù)

? data() {

? ? return {

? ? ? //items: [],

? ? ? data:''

? ? }; ?

? },

? //mounted()是一個(gè)生命周期鉤子函數(shù)，它會在組件被掛載到DOM后調(diào)用

? mounted() {

? ? this.fetchData();

? },

? //methods對象用于定義組件的方法

? //fetchData()方法使用axios庫發(fā)送一個(gè)GET請求到指定的URL

? //通過Promise的.then()方法處理請求成功的響應(yīng)，this.data = response.data將響應(yīng)的數(shù)據(jù)設(shè)置到組件的data屬性中

? //如果請求失敗，將通過.catch()方法捕獲錯(cuò)誤，并通過console.error()方法將錯(cuò)誤打印到控制臺。

? methods: {

? ? fetchData() {

? ? ? axios.get('https://v.api.aa1.cn/api/yiyan/index.php')

? ? ? ? .then(response => {

? ? ? ? ? // 將返回的數(shù)據(jù)設(shè)置到items數(shù)組

? ? ? ? ? // this.items = response.data;

? ? ? ? ? this.data = response.data

? ? ? ? ? // document.body.innerHTML = this.items，用這種方式也可以去掉返回內(nèi)容中的p標(biāo)簽

? ? ? ? ? console.log(response.data)

? ? ? ? })

? ? ? ? .catch(error => {

? ? ? ? ? console.error(error);

? ? ? ? });

? ? }

? }

}

</script>?

<template><div ><ul><!--<li v-for="item in items" :key="item.id">{{ item }}</li>--><!--使用了Vue的指令v-html，它會將組件的data屬性的值作為HTML內(nèi)容進(jìn)行渲染--><div v-html="data"></div><!--使用了Vue的插值語法{{ }}，它會將組件的data屬性的值作為文本進(jìn)行渲染--><!--沒有去掉p標(biāo)簽--><div>{{ data }}</div></ul></div>
</template><script>
// 導(dǎo)入axios模塊，使用axios來發(fā)送HTTP請求了
// export default是用于導(dǎo)出模塊的語法
import axios from 'axios';
// const data = ref()
// const  items = ref([])
export default {//data()函數(shù)是用于定義組件的數(shù)據(jù)屬性的方法//data屬性被初始化為空字符串，可以用來存儲數(shù)據(jù)data() {return {//items: [],data:''};  },//mounted()是一個(gè)生命周期鉤子函數(shù)，它會在組件被掛載到DOM后調(diào)用mounted() {this.fetchData();},//methods對象用于定義組件的方法//fetchData()方法使用axios庫發(fā)送一個(gè)GET請求到指定的URL//通過Promise的.then()方法處理請求成功的響應(yīng)，this.data = response.data將響應(yīng)的數(shù)據(jù)設(shè)置到組件的data屬性中//如果請求失敗，將通過.catch()方法捕獲錯(cuò)誤，并通過console.error()方法將錯(cuò)誤打印到控制臺。methods: {fetchData() {axios.get('https://v.api.aa1.cn/api/yiyan/index.php').then(response => {// 將返回的數(shù)據(jù)設(shè)置到items數(shù)組// this.items = response.data;this.data = response.data// document.body.innerHTML = this.items，用這種方式也可以去掉返回內(nèi)容中的p標(biāo)簽console.log(response.data)}).catch(error => {console.error(error);});}}}
</script>

調(diào)用需要設(shè)置參數(shù)的接口?

? ? ? ? TestView2.vue文件如下：

<template>

? <div >

? ? <ul>

? ? <!--使用Vue的事件修飾符@submit.prevent，表示在表單提交時(shí)會觸發(fā)名為handleSubmit的方法。

? ? ? prevent修飾符用于阻止表單默認(rèn)的提交行為，以便可以使用自定義的邏輯來處理提交事件。-->

? ? <form @submit.prevent="handleSubmit">

? ? ? <!--使用Vue的雙向綁定指令v-model，將輸入框的值綁定到了組件的message屬性。-->

? ? ? <input type="text" v-model="message" placeholder="請輸入內(nèi)容">

? ? ? <input type="number" v-model="type" placeholder="請輸入類型">

? ? ? <button type="submit">提交</button>

? ? </form>

? ? ? {{ message }}

? ? ? <!--v-for="(item, index) in data.data"是一個(gè)指令，表示要對data.data數(shù)組進(jìn)行循環(huán)遍歷。

? ? ? ? 在每次循環(huán)中，item表示當(dāng)前項(xiàng)的值，index表示當(dāng)前項(xiàng)的索引。

? ? ? ? :key="item.id"是一個(gè)特殊的屬性綁定語法，用于為循環(huán)渲染的每個(gè)項(xiàng)提供一個(gè)唯一的標(biāo)識符。-->

? ? ? <li v-for="(item,index) in data.data" :key="item.id">

? ? ? ? ? {{index + 1 }}

? ? ? ? ? {{ item.riqi }}

? ? ? ? ? {{ item.wendu }}

? ? ? ? ? {{ item.tianqi }}

? ? ? </li>

? ? ? </ul>

? </div>

</template>

<script>

import axios from 'axios';

// const data = ref()

// const ?items = ref([])

export default {

? data() {

? ? return {

? ? ? //items: [],

? ? ? data:'',

? ? ? message: '',

? ? ? type: '1',

? ? };

? ?

? },

? mounted() {

? ? this.handleSubmit()

? },

? methods: {

? ? handleSubmit() {

? ? ? axios.get('https://v.api.aa1.cn/api/api-tianqi-3/index.php', {

? ? ? ? ? // 使用 axios.get 發(fā)送一個(gè) GET 請求，通過第二個(gè)參數(shù)的 params 屬性傳遞了這個(gè)參數(shù)對象，

? ? ? ? ? // 將 msg 和 type 作為查詢參數(shù)傳遞給服務(wù)器。

? ? ? ? ? params: {

? ? ? ? ? ? ? msg: this.message,

? ? ? ? ? ? ? type: this.type

? ? ? ? ? },

? ? ? ? ? })

? ? ? ? ? .then(response => {

? ? ? ? ? ? ? // 在這里處理返回的數(shù)據(jù)

? ? ? ? ? ? ? this.data=response.data;

? ? ? ? ? ? ? console.log(response.data);

? ? ? ? ? ? ?

? ? ? ? ? })

? ? ? ? ? .catch(error => {

? ? ? ? ? ? ? // 在這里處理錯(cuò)誤

? ? ? ? ? ? ? console.error(error);

? ? ? ? ? ? ?

? ? ? ? ? });

? ? }

? }

}

</script>

<template><div ><ul><!--使用Vue的事件修飾符@submit.prevent，表示在表單提交時(shí)會觸發(fā)名為handleSubmit的方法。prevent修飾符用于阻止表單默認(rèn)的提交行為，以便可以使用自定義的邏輯來處理提交事件。--><form @submit.prevent="handleSubmit"><!--使用Vue的雙向綁定指令v-model，將輸入框的值綁定到了組件的message屬性。--><input type="text" v-model="message" placeholder="請輸入內(nèi)容"><input type="number" v-model="type" placeholder="請輸入類型"><button type="submit">提交</button></form>{{ message }}<!--v-for="(item, index) in data.data"是一個(gè)指令，表示要對data.data數(shù)組進(jìn)行循環(huán)遍歷。在每次循環(huán)中，item表示當(dāng)前項(xiàng)的值，index表示當(dāng)前項(xiàng)的索引。:key="item.id"是一個(gè)特殊的屬性綁定語法，用于為循環(huán)渲染的每個(gè)項(xiàng)提供一個(gè)唯一的標(biāo)識符。--><li v-for="(item,index) in data.data" :key="item.id">{{index + 1 }} {{ item.riqi }}{{ item.wendu }}{{ item.tianqi }}</li></ul></div>
</template><script>
import axios from 'axios';
// const data = ref()
// const  items = ref([])
export default {data() {return {//items: [],data:'',message: '',type: '1',};},mounted() {this.handleSubmit()},methods: {handleSubmit() {axios.get('https://v.api.aa1.cn/api/api-tianqi-3/index.php', {// 使用 axios.get 發(fā)送一個(gè) GET 請求，通過第二個(gè)參數(shù)的 params 屬性傳遞了這個(gè)參數(shù)對象，// 將 msg 和 type 作為查詢參數(shù)傳遞給服務(wù)器。params: {msg: this.message,type: this.type},}).then(response => {// 在這里處理返回的數(shù)據(jù)this.data=response.data;console.log(response.data);}).catch(error => {// 在這里處理錯(cuò)誤console.error(error);});}}
}
</script>

?執(zhí)行程序

? ? ? ? 可以參考在vue中搭建路由：3.Vue-在Vue框架中搭建路由-CSDN博客?

? ? ? ? 成功訪問到網(wǎng)頁后，如果沒有顯示，需要多刷新幾次，屬于網(wǎng)絡(luò)問題。如果一直沒有請求成功，則是請求次數(shù)太多，官方不會返回響應(yīng)，需要等待一段時(shí)間再次發(fā)起請求，或者自行更換接口進(jìn)行測試

?展示圖?

?

后記?

? ? ? ? 覺得有用可以點(diǎn)贊或收藏！?