【axiox】前后端接口通讯数据交互
- 重要全局配置：
- 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 = <T>(config: HTTPConfig) => Promise<T>;
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<DeviceInfo>({url: ip + '/device/info',method: 'get',timeout,cancelToken: source?.token,});},