http 工具类封装

import axios from "axios";
const baseUrl = process.env.NODE_ENV === "development" ? "http://httpbin.org" : "http://httpbin.org"
class HttpRequest {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  getInstanceConfig(){
    const config = {
      baseURL: this.baseUrl,
      header: {}
    }
    return config
  }

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

    // 添加响应拦截器
    instance.interceptors.response.use(
      function (response) {
        // 对响应数据做点什么
        return response;
      },
      function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
      }
    );
  }

  request(options) {
    const instance = axios.create()
    options = {...(this.getInstanceConfig()),...options}
    this.interceptor(instance)
    return instance(options)
  }
}

export default new HttpRequest(baseUrl)

在业务类用调用

import http from '../api/http'

export default {
  mounted() {
    console.log('111111111')
    this.test()
  },
  methods: {
    test() {
      http
        .request({
          method: 'post',
          url: '/post',
          data: {
            firstName: 'Fred',
            lastName: 'Flintstone',
          },
        })
        .then((res) => {
          console.log('res==',res)
        })
        .catch((res) => {
          console.log('error==',res)
        })
    },
  },
}
</script>