vue腳手架中使用axios調用本地檔案和外部接口

下載下傳

cnpm i axios --save

注冊

import axios from ‘axios’

在created周期調用axios

本地檔案放在 pubilc檔案夾内，不會被webpack，但需要絕對路徑才可以引用

例：請求本地資料

import axios from "axios";
export default {
  async created() {
    console.log(111);
    let { data } = await axios.get("./api/home.json");
    console.log(data, 222);
    console.log(333);
  },
};
           

注意：關于async ：axios是異步代碼，會跳過執行下面的操作，列印順序為111=>undefined 222=>333 此時data未定義，是以使用async 和await 将異步代碼轉化成我們希望的同步操作，此次，列印順序為111=>資料data 222=>333

注意：由于請求的本地的檔案，是以檔案必須放在pubilc内，請求的路徑為./api/home.json

例：請求外部接口：

import axios from "axios";
export default {
  async created() {
    console.log(111);
    let { data } = await axios.get("http://書簽中的語橋外語", {
      params: {
        pageIndex: 1,
        pageSize: 10,
      },
    });
    console.log(data, 222);
    console.log(1333);
  },
};
           

注意：get傳的資料要套一層params，調用時會自動轉成：

http://書簽中的語橋外語?pageIndex=1&pageSize=10