vue での Axios 二次パッケージング

序文

Vue プロジェクトまたは React プロジェクトを開発するとき、データを取得するためにバックエンドにリクエストを送信するという非常に重要な仕事を行う必要があります。そのため、リクエストをより柔軟かつ便利に送信できるようにするために、通常はカプセル化前の開発カプセル化前の第 2 ラウンドの axios は、まだ単純な axios の理解です

---

---

1. npm i axios ダウンロード axios プラグイン

---

2. 新しい utils フォルダーを作成し、新しい http.js ファイルを作成します

import axios from "axios"; // 引入axios

// 实例化axios并设置网络延迟两秒

const instance = axios.create({
  timeout: 2000,
});

// 设置post请求头
instance.defaults.headers.post["Content-Type"] =
  "application/json;charset=utf-8";

// 请求拦截器
instance.interceptors.request.use(
  // 请求数据接口之前的一些逻辑操作，例如：判断token是否存在、配置请求头
  (config) => {
    //设置请求头
    if (localStorage.getItem("token")) {
      config.headers.common["token"] = localStorage.getItem("token");
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // 响应回来的数据，做一些逻辑操作
    console.log(res);
  },
  // 失败做的一些逻辑
  (error) => Promise.error(error.response)
);

// 导出二次封装的axios
export default instance;

---

3. main.js にグローバル オブジェクトをマウントする

import { createApp } from "vue";
import App from "./App.vue";
import http from "@/utils/http";
const app = createApp(App); // 实例化app

app.config.globalProperties.$http = http; // 在全局挂载二次封装的axios

app.mount("#app");

---

4. ファイルで使用

<script>
export default {
  methods: {
    addList(){
        this.$http.post("/路径").then(res => {
            console.log(res)  
      })
    }
  },
};
</script>