【axiox】前后端接口通讯数据交互

oumae-kumiko2024-03-05 16:49

重要全局配置：
- axios.create(); 设置axios请求的公共配置信息。
- service.interceptors.request.use((config)=>{}) 请求拦截器
- service.interceptors.response.use((res)=>{},(err)=>{}) 响应拦截器
- const source = axios.CancelToken.source(); 用来取消接口请求的。

TypeScript 复制代码

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;

调用请求案例：

TypeScript 复制代码

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,
    });
  },