使用vue简单的封装axios

没有什么难度，一看基本上就能懂，其实和普通axios也差不了多少。只不过就是可以自由一些，可以使用自己想要的名字去请求接口，也相对可以省下一些代码。

1.首先创建文件夹，在文件夹中创建 Api.js和http.js（名称可以随自己更改）

2. 在http.js中引入axios 并创建拦截器

import axios from "axios";
// import { ElLoading, ElMessage } from "element-plus";
 
let http = axios.create({
  baseURL: "",
  // timeout: 1000,
});
 
 
// mock拦截
let loadingInstance;
 
// 拦截器的添加
http.interceptors.request.use(
  (config) => {
    // loadingInstance = ElLoading.service("加载中");
    return config;
  },
  (err) => {
    loadingInstance?.close();
    // ElMessage.error("网络异常");
    return Promise.reject(err);
  }
);
 
//响应拦截器
http.interceptors.response.use(
  (res) => {
    loadingInstance?.close();
    return res.data;
  },
  (err) => {
    loadingInstance?.close();
    // ElMessage.error("请求失败");
    return Promise.reject(err);
  }
);
export default http;

3.在Api.js中引入http.js，并写如自己封装的方法

import http from "./http.js";
export default {
//custom这个名字可以随意修改，没必要非得是custom
  custom(data,port,way) {
    // console.log('接收数据',data,port,way);
    return http({
      url: port,
      method: way,
      data:data,
    });
  },
}

4.在需要用到的页面中引入Api.js

import Api from "../api/Api";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    let that = this;
    Api.custom({ id: 1 }, "输入自己需要的url域名", "post")
      .then((res) => {
        that.list = res.sciencelist;
        console.log(res，"自定义");
      });
  },

5.最后请求结果：