axios的介绍及配置多个服务器url

文章目录

1、常用的默认配置的是:baseURL、method、timeout

① baseURL:设置url的基本结构(请求根地址),域名和协议,再结合属性url某个请求路径,axios会自动将baseURL 和 url 进行拼接,从而得出正确的请求路径。

② method:请求方式 get/post

③ timeout:延时时间(超过多少时间就取消请求)【单位是毫秒】

2、axios配置多个服务器url

javascript 复制代码
// 请求时的基础配置VITE_APP_BASE_URL
export const URLMap = {
  base: import.meta.env.MODE === 'development'
  ? import.meta.env.VITE_APP_BASE_URL
  : (window as any).config.VITE_APP_BASE_URL,
  pdf:import.meta.env.MODE === 'development'
  ? import.meta.env.VITE_APP_BASE_URL_PDF
  : (window as any).config.VITE_APP_BASE_URL_PDF,
}
  
const REQUESTS : Record<string, AxiosInstance> = {}

declare module 'axios' {
  interface AxiosResponse<T = any> {
    errorinfo: null
    doc: any
    time: any
    x: any
    y: any
  }
  export function create(config?: AxiosRequestConfig): AxiosInstance
}

Object.keys(URLMap).forEach((item) => {
    const REQUEST: AxiosInstance = axios.create({
    baseURL: URLMap[item],
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
    },
    timeout: 300000,
    withCredentials: item === 'data',
  })
  REQUESTS[item] = REQUEST
})


// 请求拦截器
Object.keys(REQUESTS).forEach((item) => {
  REQUESTS[item].interceptors.request.use(async (config: AxiosRequestConfig) => {
    const headerToken = await getToken()
    config.headers = config.headers || {}
    if (headerToken)
      config.headers.Authorization = headerToken
  
    if (config.headers.type === 'form') {
      delete config.headers.type
      config.data = qs.stringify(config.data)
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    }
    return config
  })
})


// 响应拦截器
Object.keys(REQUESTS).forEach((item) => {
  REQUESTS[item].interceptors.response.use(
    async (response: AxiosResponse) => {
      const { status, data = {}, statusText } = response
      const errorText = serverCodeMessage[status] || statusText
      const error = ''
      if (status)
        return Promise.resolve(data)
      message.error(error)
      return Promise.reject(error)
    },
    (error) => {
      message.error(String(new Error(error)))
      return Promise.reject(new Error(error))
    },
  )
})

export default REQUESTS

3、配置api文件

javascript 复制代码
import requests from '@/service/index'

export const getAll = (data: paramsInter) => requests.base({
  url: 'xx/xx',
  method: 'POST',
  data,
})
export const get = (data: paramsInter) => requests.pdf({
  url: 'xx/xx',
  method: 'POST',
  data,
})

这样,不同的接口实现从不同的服务器获取资源

4、文件中使用

javascript 复制代码
import { getAll} from '@/service/xx/index'
onMounted(() => {
  getXX()
})

function getXX() {
  getAll(params).then((res) => {
  // xxx
}
相关推荐
uhakadotcom27 分钟前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom31 分钟前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom33 分钟前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom42 分钟前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom1 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI2 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua2 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI2 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室2 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼2 小时前
Nuxt3能上生产吗?
前端