### 一、Vue3.x中使用Axios請求遠程真實Api接口數據 [https://github.com/axios/axios](https://github.com/axios/axios) **1、安裝** ~~~ npm install axios --save 或者 yarn add axios 或者 cnpm install axios --save ~~~ **2、引入使用** ~~~ import Axios from "axios"; axios.get('/user?ID=12345') .then(function (response) { // handle success console.log(response); }) .catch(function (error) { // handle error console.log(error); }) .then(function () { // always executed }); ~~~ **完整代碼：** ~~~ getData(){ var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; Axios.get(api).then((response)=>{ this.list=response.data.result; }).catch((error)=>{ console.log(error); }) } ~~~ ### 二、Vue3.x全局綁定Axios **vue3.x中全局綁定屬性參考**：[https://v3.vuejs.org/api/application-config.html#warnhandler](https://v3.vuejs.org/api/application-config.html#warnhandler) ~~~ import { createApp } from 'vue' import App from './App.vue' import axios from 'axios'; var app=createApp(App) app.config.globalProperties.axios=axios app.mount('#app') ~~~ ### 三、Vue3.x中使用fetch-jsonp請求jsonp接口 axios不支持jsonp請求，如果我們要用jsonp來請求數據可以使用fetch-jsonp這個模塊。 [https://github.com/camsong/fetch-jsonp](https://github.com/camsong/fetch-jsonp) ~~~ import fetchJsonp from 'fetch-jsonp'; ~~~ ~~~ getData() { fetchJsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php', { jsonpCallback: 'cb', }) .then(function (response) { return response.json() }).then(function (json) { console.log(json) }).catch(function (ex) { console.log('parsing failed', ex) }) } ~~~ ### 四、使用函數防抖實現百度搜索 ~~~ <template> <div class="home"> <button @click="getData()">獲取數據</button> <input type="text" v-model="keyword" @keyup="getData" /> <br> <ul> <li v-for="(item,index) in list" :key="index">{{item}}</li> </ul> </div> </template> <script> import fetchJsonp from 'fetch-jsonp'; export default { data() { return { keyword: "", list: [], timer: "" } }, methods: { getData() { if (this.keyword != "") { clearTimeout(this.timer); this.timer = setTimeout(() => { var api = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.keyword fetchJsonp(api, { jsonpCallback: 'cb', }) .then(function (response) { return response.json() }).then((json) => { this.list = json.s }) }, 200) } } }, } </script> <style lang="scss"> .home { padding: 20px; } </style> ~~~