vue中封装axios

1.在 src 目录下新建 request 文件夹，并新建 request.js/index.js 文件

request.js/index.js 文件中的代码如下：

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

// 创建axios实例
const serve = axios.create({
  baseURL: "xxx",
  timeout: 10000,
});

// 添加请求拦截器
serve.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
serve.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

// 导出
export default serve;

2.在 src 目录下新建 api 文件夹，并新建 api.js 文件

api.js 文件中的代码如下：

// 引入request文件
import request from "@/request/request";

const getListAPI = (params) => {
  return request({
  // 传递过来的参数
    ...params,
  });
};

export default getListAPI;

利用 ES6 的扩展运算符(对象展开符) … 接收传递过来的参数

3.在组件中使用

代码如下：

<script>
import getListAPI from "@/api/xxxApi";

export default {
  name: "MyHome",
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const { data: res } = await getListAPI({
        method:'GET',
        url: "/xxx",
        params: {
          // 具体参数
        },
      });
      this.list = res;
    },
  },
};
</script>