Axios アプリケーション レベルの二次パッケージング

ロケール vue3

utils フォルダーの下に新しい request.js を作成します。

import axios from 'axios';
import {
    
     useOnline } from '@vueuse/core';

const instance = axios.create();
instance.defaults.baseURL = import.meta.env.VITE_BASE_URL;
instance.defaults.headers['Content-Type'] = 'application/json';



// 请求头信息获取及处理
const getParams = config => {
    
    
  const {
    
     url, method = 'POST', data = {
    
    }, operateBusy = false, responseType = 'json' } = config;

  if (url && typeof url !== 'string') return false;
  const headers = {
    
     ...config.headers };

  try {
    
    
    let option = {
    
    
      url,
      method,
      headers,
      operateBusy,
    };
    if (method == 'GET') {
    
    
      option = {
    
     ...option, params: data };
    } else {
    
    
      option = {
    
     ...option, data };
    }
    const realConfig = {
    
    
      loading: config.loading,
      responseType: responseType,
      responseEncoding: 'utf8',
      timeout: 30000,
      ...option,
    };
    return Promise.resolve(realConfig);
  } catch (error) {
    
    
    return Promise.reject(error);
  }
};


// 添加请求拦截器
instance.interceptors.request.use(
  async function (config) {
    
    
  
    config.headers = {
    
    
      'Content-Type': 'application/json',
      ...config.headers,
    };
    
    // 由于有的接口有时候返回将近20秒 lodding自动显示取消延长到21秒
    if (config.loading) {
    
    
      console.log('加载中')
    }
    return config;
  },
  function (error) {
    
    
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    
    
    console.log('response', response);
    // ElMessage.clear();
    if (response.status == 200) {
    
    
      const {
    
     code, message, data, status } = response.data || {
    
    };
      
      if (code == 1) {
    
     // 成功返回
        return Promise.resolve(response.data);
      } else if (code == 0) {
    
    
        ElMessage({
    
    
          message: response.data.msg,
          type: 'warning',
        })
        return Promise.reject(response.data);
      } else {
    
    
        return Promise.reject(response.data);
      }
    } else {
    
    
      return Promise.reject(response.data || 'error');
    }
  },
  function (error) {
    
    
    // ElMessage.clear();
    console.log('response error', error);
    return Promise.reject(error);
  }
);

const http = async config => {
    
    
  const newConfig = await getParams(config);
  const request = instance.request(newConfig);
  return new Promise((resolve, reject) => {
    
    
    request
      .then(async response => {
    
    
        resolve(response);
      })
      .catch(error => {
    
    
        reject(error);
      });
  });
};

export default http;

使用

import request from '@/utils/request.js';

request({
    
    
  url: '/new_index/set_user_index',
  data: {
    
    
    id: '123'
  },
}).then(res => {
    
    
  console.log('res:', res)
  
})