vue3使用axios尝试

前情提要：仅记录自己开发过程中的见闻

安装axios：npm install axios

尝试了三种方式：

方式一：单个组件内的<script>使用，直接import axios from "axios";

import axios from "axios";

methods: {
  function1() {
    const data = {
      data1: "aaa",
      data2: "bbb",
    };
    axios
      .post("url", data)
      .then((res) => {
        // 请求返回数据处理
        console.log(res); 
      })
      .catch((err) => {
        // 请求异常处理
        console.log(err);
      });
  }
}

方式二：自定义一个axios封装js，然后单个组件内的<script>使用。

// 自定义的封装文件aaa.js，文件名自定义，文件存放路径自定义
import axios from "axios";

// 创建axios实例
const axiosIns = axios.create({
  timeout: 6000,
  withCredentials: true,
  headers: {
    // 设置后端需要的传参类型，此处适用于form data形式
    "Content-Type": "application/x-www-form-urlencoded",
    "X-Requested-With": "XMLHttpRequest",
    Accept: "application/json",
  },
});
export default axiosIns;

// 单个组件内的<script>
// @ is an alias to /src
import axiosIns from "@/utils/aaa.js";

export default {
  methods: {
    function1() {
      axiosIns({
        url: "url",
        method: "post",
      }).then((res) => {
        console.log(res);
        alert("请求成功!");
      });
    },
  },
};

方式三：

在main.js中，使用provide()，提供自定义的axios封装。（自定义的axios封装同方式二）

在单个组件的setup()内，使用inject()获取axios封装。

// main.js
import axiosIns from "@/utils/aaa.js";

// 修改@vue-cli创建的默认写法
// createApp(App).use(store).use(router).mount("#app");
const app = createApp(App);
app.use(store).use(router);
app.provide("$axiosIns", axiosIns);
app.mount("#app");

// 单个组件内的<script>
import { inject } from "vue";

export default {
  setup() {
    // 获取封装的axios实例
    const $axiosIns = inject("$axiosIns");

    function function1() {
      // 将传参从request payload方式，转成form data方式
      const data = qs.stringify({
        id: "2",
      });
      $axiosIns
        .post("url", data)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    }
    return { function1 };
  },
};