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