Vue 3.x 中使用 Axios 請求遠程Api接口數據

一、安裝axios插件

npm install axios --save
//或者 yarn add axios
//或者 cnpm install axios --save

注：安裝包的時候 后面的 --save，如果不加，只安裝在當前項目，把代碼發給別人，是運行不了的，所以安裝工具類包等，盡量都加上 --save

二、如何使用（github說明）

1、在需要使用的組件中引入 axios模塊import axios from 'axios'

2、使用 axios.get 或者 axios.post 請求數據

<template>
  <div>
    <button @click="getData()">獲取api數據</button>
  </div>
</template>

<script>
//1、引入 axios 模塊
import axios from 'axios'
export default {
  data() {
    return {
      msg: "主頁"
    }
  },
  methods:{
   getData(){
      var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      //2.使用axios 進行get請求
      axios.get(api).then((res)=>{
        //請求成功的回調函數
        console.log(res)
      }).catch((err)=>{
        //請求失敗的回調函數
        console.log(err)
      })
   }

  }
};
</script>

三、全局配置 axios

1、在 main.js中全局配置

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Axios from 'axios';//引入axios

var app=createApp(App)
app.config.globalProperties.Axios=Axios //全局配置axios

app.use(store).use(router).mount("#app");

小心得：自己寫的屬性，如果有很多地方使用，也可以使用全局綁定，比如我們寫了一個 storage.js 模塊，如果大量地方使用，我們就可以全局注冊，
方式一樣，也是先在 main.js 中引入，如何使用 app.config.globalProperties.Storage=Storage ,然后在需要用到的地方使用 this.Storage就可以調用了

2、使用的時候直接使用 this.Axios.get 或者 this.Axios.post 請求接口

 getData(){
      var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
      //2.使用axios 進行get請求
      this.Axios.get(api).then((res)=>{
        //請求成功的回調函數
        console.log(res)
      }).catch((err)=>{
        //請求失敗的回調函數
        console.log(err)
      })
   }