行业知识
【axiox】前后端接口通讯数据交互
2026-11-06 16:47:09
来源：互联网转载
- ��重要全局配置：
- axios.create(); 设置axios请求的公共配置信息。
-
service.interceptors.request.use((config)=>{}) 请求拦截器
（） -
service.interceptors.response.use((res)=>{},(err)=>{}) 响应拦截器
-
const source = axios.CancelToken.source(); 用来取消接口请求的。
（）
import axios, { CancelToken } from 'axios';const usbIP = 'http://192.168.42.1:8080';// 创建默认请求配置数据；// 每次service() 请求接口时，都会使用默认设置的参数内容。const service = axios.create({ baseURL: usbIP, // 设置 url 默认前缀 timeout: 1000 * 30, // 设置全局超时时长});// const source = axios.CancelToken.source(); // 用来取消接口的，发送请求时传入 { cancelToken: source?.token }。// 然后调用 source.cancel(''); 即可取消接口请求，('')括号内的就是取消[rejct]的信息内容。// 设置接口请求拦截器：每个接口发送请求前，都会从这走一遍。service.interceptors.request.use((config) => { return config})// 设置接口响应拦截器：每个接口返回数据时，都会先经过拦截器走一遍。service.interceptors.response.use( (res) => { // ... return Promise.resolve(res.data); }, (error) => { return Promise.reject(error); },);export interface HTTPConfig { url: string; method: 'get' | 'post' | 'delete' | 'head' | 'options' | 'put' | 'patch'; data?: object; params?: object; headers?: object; responseType?: any; responseEncoding?: string; baseURL?: string; timeout?: number; cancelToken?: CancelToken;}type HTTP = (config: HTTPConfig) => Promise;const useHttp: HTTP = (config) => { return service(config);};export default useHttp;调用请求案例：
import http from '@cut/http/request'; getDeviceInfo(ip: string, source?: CancelTokenSource, timeout = 1000 * 5) { return http({ url: ip + '/device/info', method: 'get', timeout, cancelToken: source?.token, }); },
