封装 axios 开箱即用！！！

封装 axios 开箱即用！！！

1. 封装axios

创建一个 request.js 文件

import axios from "axios";

// 新建一个 axios 实例
const service = axios.create({
  baseURL: "/api", // 根据项目设置不同的接口请求前缀
  timeout: 5000, // 请求超时时间
});

// 添加请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    config.headers = {
      ...config.headers,
      ...config.header,
    };
    console.log("config::::::", config);
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  (response) => {
    // 对响应数据做点什么
    console.log("response:::::", response)
    return response;
  },
  (error) => {
    console.log("error:::::", error)
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

let request = {};

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} header [自定义请求头]
 */

request.get = (url, params = null, header = {}) => {
  return new Promise((resolve, reject) => {
    service
      .get(url, { params, header })
      .then((res) => {
        resolve(res.data);
      })
      .catch((e) => {
        reject(e);
      });
  });
};

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} data [请求时携带的参数]
 * @param {Object} header [自定义请求头]
 */
request.post = (url, data, header = {}) => {
  return new Promise((resolve, reject) => {
    service
      .post(url, data, { header })
      .then((res) => {
        resolve(res.data);
      })
      .catch((e) => {
        reject(e);
      });
  });
};

export default request;

2. 使用封装好的 request.js 文件

在同级目录下，创建一个 api.js 文件

import request from "./request";

export const getDetail = (params) => {
  return request.get(
    "/api/getDetail", //接口路径
    params,
    { custom: "custom header" } // 自定义请求头例子
  );
};

export const addData = (data) => {
  return request.post(
    "/api/addData", //接口路径
    data,
    { custom: "custom header" } // 自定义请求头例子
  );
};

3. 使用接口 这里使用的 vue3 举例

import 导入接口方法

<template>
  <div class="box"></div>
</template>

<script setup>
import { getDetail, addData } from "@/utils/api"; // 引入api中的接口调用方法
import { onMounted } from "vue";

// 页面渲染
onMounted(async () => {

  const result1 = await getDetail({
    id: "1234",
  });
  console.log("result::::::::", result1);


  const result2 = await addData({
    name: "myp",
  });
  console.log("result2::::::::", result2);

});
</script>

<style scoped lang="scss"></style>