axios封装&proxyTable代理配置

只在开发环境有效、打包之后代理配置就不生效了

vite.config.ts 内进行代理配置

多代理配置

server: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://rap2api.taobao.org/app/mock/data',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      '/music-api': {
        target: 'https://api.uomg.com/api/rand.music?format=json&sort=%E7%83%AD%E6%AD%8C%E6%A6%9C',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/music-api/, '')
      },
      '/music-lyric': {
        // target:'https://api.imjad.cn/cloudmusic/?type=lyric&id=1479526505'
        target: 'https://api.imjad.cn/cloudmusic/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/music-lyric/, '')
      },
      '/one-api': {
        target: 'https://api.tianapi.com/txapi/one/index?key=7764228bedff0b2310879d47173c4603&rand=1',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/one-api/, '')
      },
      '/diary-api': {
        target: 'http://api.tianapi.com/txapi/tiangou/index?key=7764228bedff0b2310879d47173c4603',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/diary-api/, '')
      },

    },
}

新建一个http.ts文件对axios封装

最基础的配置只需要实例化axios对象,配置baseUrl就行了

import { CookieStorage } from '@/utils/cookies';
import axios, { AxiosRequestConfig } from 'axios';
import qs from 'qs';

const instance = axios.create({
  timeout: 600000,
  headers: { 'Content-Type': 'application/json' },
  baseURL: '/',
});

// 保存下载文件
function saveFile(binaryData: string, fileName: string, mime?: string) {
  const fileDownload = require('js-file-download');
  fileDownload(binaryData, fileName, mime);
}

instance.download = {
  get(url, config) {
    const { filename = 'temp', mime = '' } = config || {};
    return instance.get(url, { ...config, responseType: 'blob' }).then(res => {
      saveFile(res.data, filename, mime);
      return Promise.resolve(res);
    });
  },
  post: (url, data, config) => {
    const { filename = 'temp', mime = '' } = config || {};
    return instance.post(url, data, { ...config, responseType: 'blob' }).then(res => {
      saveFile(res.data, filename, mime);
      return Promise.resolve(res);
    });
  },
};

// ne-upload
instance.upload = (url, data, config = {}, params) => {
  const formData = new FormData();
  data.forEach(item => {
    formData.append('file', item.value, item.name || item.filename);
  });
  if (params && Object.keys(params).length > 0) {
    for (const m in params) {
      if (params.hasOwnProperty(m)) {
        const key = m;
        const value = params[m];
        formData.append(key, value);
      }
    }
  }
  return instance.request({
    method: 'post',
    ...config,
    url,
    data: formData,
  });
};

instance.formdata = (url, data, config = {}) => {
  const formData = qs.stringify(data); // 会将汉字encode
  return instance.request({
    ...config,
    url,
    data: formData,
    method: config.method || 'post',
    headers: { ...config.headers, 'Content-Type': 'application/x-www-form-urlencoded' },
  });
};

// 请求拦截器
instance.interceptors.request.use(config => {
    const { params = {} } = config;
    config.params = { ...params, time: new Date().getTime() };
    // add token if need
    config.headers = {
      ...(config.headers || {}),
      'X-Auth-Token': CookieStorage.token,
      'X-Stargate-AppId': 25,
    };
    return config;
  }, err => {
    // show err
  }
);

// 响应拦截器
instance.interceptors.response.use(response => {
    return Promise.resolve(response);
  }, error => {
    // show error_msg and reject
    console.log('响应失败信息', error.response);
    if (error && error.response && error.response.status) {
      let errCode = 0;
      let errMsg = '';
      if (!!error.response.data) {
        const { status, errorMsg } = error.response.data;
        errCode = status;
        errMsg = errorMsg;
      }
      switch (error.response.status) {
        case 400:
          window._vm.$messageSelf.error(errMsg);
          break;
        case 401:
          // to login or authorize
          window._vm.$messageSelf.error(errMsg);
          CookieStorage.clear();
          // window.location.href = '';
          break;
        case 403:
          // to login or authorize
          window._vm.$messageSelf.error(errMsg);
          CookieStorage.clear();
          window.location.href = '/';
          break;
        case 404:
          // request failed, no res on server
          window._vm.$messageSelf.error('系统错误，请稍候再试');
          break;
        case 500:
          // server error
          window._vm.$messageSelf.error(errMsg);
          break;
      }
    }
    return Promise.reject(error);
  }
);

export default instance;

新建一个common-api.ts对公共请求进行封装

引入http.ts文件，并根据业务类型进程处理

import http from '@/utils/http';

export function commonRequest(path: string, params: any = {}, method: string = 'get') {
  if (method === 'post') {
    return http.post(path, params).then(res => {
      return Promise.resolve(res.data);
    });
  } else {
    return http.get(path, { params }).then(res => {
      return Promise.resolve(res.data);
    });
  }
}

具体使用

按照commonRequest方法要求进行传参，并使用。根据不同的接口名，匹配不同的接口地址。

<template>
  <div>
    <button @click="handleRequest('/music-api')">/music-api</button>
    <button @click="handleRequest('/music-lyric')">/music-lyric</button>
    <button @click="handleRequest('/one-api')">/one-api</button>
    <button @click="handleRequest('/diary-api')">/diary-api</button>
    <h3>{{ showData }}</h3>
  </div>
</template>
<script lang='ts'>
import { defineComponent } from "@vue/runtime-core";
import { ref } from "vue";
import { commonRequest } from "../api/http";

export default defineComponent({
  setup: () => {
    let showData = ref("e");

    function handleRequest(api: string) {
      commonRequest(api, {}).then((res) => (showData.value = res));
    }
    return { showData, handleRequest };
  },
});
</script>