文章目录
- 1、常用的默认配置的是:baseURL、method、timeout
- 2、axios配置多个服务器url
- 3、配置api文件
- 4、文件中使用
1、常用的默认配置的是:baseURL、method、timeout
① baseURL:设置url的基本结构(请求根地址),域名和协议,再结合属性url某个请求路径,axios会自动将baseURL 和 url 进行拼接,从而得出正确的请求路径。
② method:请求方式 get/post
③ timeout:延时时间(超过多少时间就取消请求)【单位是毫秒】
2、axios配置多个服务器url
// 请求时的基础配置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: nulldoc: anytime: anyx: anyy: 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 = headerTokenif (config.headers.type === 'form') {delete config.headers.typeconfig.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 } = responseconst errorText = serverCodeMessage[status] || statusTextconst 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文件
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、文件中使用
import { getAll} from '@/service/xx/index'
onMounted(() => {getXX()
})function getXX() {getAll(params).then((res) => {// xxx
}