Vue2对Axios封装使用

接下来使用举例写home首页的api路径 src\api\home.js这里一定要记得return requset。创建文件夹 src\utils\requset.js 引入axios 设置基础路径和超时时间即可。挂载到Vue实例上在main.js引入创建的requset.js。axios的从小白到入土。npm i axios 下载。以上是讲axios安装并挂载。

大坤...

1671人浏览 · 2023-04-27 14:55:49

大坤... · 2023-04-27 14:55:49 发布

安装排错流程：

1.安装npm i axios 安装是否成功

2.创建 src\utils\require.js 文件夹 axios.create({ }) // 指定baseURL http://127.0.0.1:8080/....

3.导出实例化的axios

4.引入到main.js 挂在到Vue实例上

import requset from "../utils/require";

export default {
  getHomeList() {
    return requset({
      url: "/user",
      // method: "GET",
    });
  },
};

6.最后一步

 getClick() {
      homeAPi.getHomeList().then(res => {
        console.log(res);
      })
    }

安装封装流程！！！

npm i axios 下载

创建文件夹 src\utils\requset.js 引入axios 设置基础路径和超时时间即可

import axios from "axios";

let requset = axios.create({
  baseURL: "http://localhost:3000",
  timeout: 5000,
});

export default requset;

挂载到Vue实例上在main.js引入创建的requset.js

import Vue from "vue";
import App from "./App.vue";
import requset from "./utils/requset.js";

Vue.config.productionTip = false;

new Vue({
  requset,
  render: (h) => h(App),
}).$mount("#app");

以上是讲axios安装并挂载

接下来使用举例写home首页的api 路径 src\api\home.js 这里一定要记得return requset

import requset from "../utils/requset.js";
export default {
  homeDataList() {
    return requset({
      url: "/list",
    });
  },
};

最后直接引入打印

<template>
    <div>
        首页
    </div>
</template>
<script>
import homeAPI from '../api/home.js'
export default {
    created() {
        this.init()
    },
    methods: {
        init() {
            homeAPI.homeDataList().then(res => {
                console.log(res);
            })
        }
    }
}
</script>

详细可看 Honerc_Y的个人空间_哔哩哔哩_bilibili axios的从小白到入土