vue中axios二次封装

前言

在进行Vue项目或者React项目开发的时候，我们都需要进行很重要的工作，就是向后端发请求获取数据，所以为了能够更加灵活和便捷的发送请求，在开发之前一般会对axios进行二次封装，在进行封装之前，还是进行简单的axios了解

npm i axios 下载axios插件

新建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;

在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");

在文件中使用

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

vue中axios二次封装

前言

猜你喜欢