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