使用 Axios 做 AJAX 功能

在使用 Vue 後，開始思考要怎麼做 AJAX 功能，上網查了資料，發現比較多人推 Axios 這套，於是試著寫了 demo code，其實用法不難，只是實際執行時會遇到小問題，以下是這次試用 Axios 的筆記。

首先是 libman.json 的設定

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "vue@3.2.33",
      "destination": "wwwroot/lib/vue/"
    },
    {
      "library": "axios@1.0.0-alpha.1",
      "destination": "wwwroot/lib/axios"
    }
  ]
}

再來是 package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@babel/types": "7.17.0",
    "@types/vue": "2.0.0",
    "axios": "1.0.0-alpha.1"
  }
}

最後是 Axios 在 Get 及 Post 的用法：

let v = defineComponent({
    name: "app2",
    data() {
        return {
            x: "aaa3",
            y: "aaa4",
            exchange: "test message",
            n1: 1,
            n2: 3,
        };
    },
    methods: {
        AJAX: function (): void {
            let url: string = "/Home/GetJSON";
            ax.default.get<JSONData>(url, {
                headers: {
                    Accept: 'application/json',
                },
            }).then(function (data) {
                let result: JSONData = data.data;
                console.log("name: " + result.name);
            });

        },
        AJAXPOST: function (): void {
            let url: string = "/Home/PostJSONData";
            let postData: JSONData = new JSONData();
            postData.name = "Peter";
            postData.age = 30;
            ax.default.post<JSONData>(url, postData, {
                headers: {
                    Accept: 'application/json',
                },
            }).then(function (data) {
                let result: JSONData = data.data;
                console.log("age: " + result.age);
            });
        },
    },
    mounted: function () {
        console.log("App name:" + this.$options.name);
        let divScripts = document.getElementById("dynamicScript");
        let newScript = document.createElement('script');
        newScript.src = 'https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37';
        divScripts.appendChild(newScript);
    }
});

前端的寫法：

<script type="importmap">
    { "imports": {
      "vue": "/lib/vue/vue.esm-browser.js",
      "axios": "/lib/axios/esm/axios.js"
    } }
</script>

<script type="module" src="~/js/app.js"></script>

<script type="module">
    import { GetVueObject} from "./js/app.js";
    var vueApp = GetVueObject("#app");
    vueApp.AJAX();
    vueApp.AJAXPOST();
</script>

參考資料