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

oumae-kumiko

已于 2024-03-02 04:15:13 修改

阅读量574

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 javascript ajax 文章标签：前端 javascript

于 2024-03-02 04:12:07 首次发布

本文链接：https://blog.csdn.net/lijiahui_/article/details/136409118

本文详细介绍了如何在axios中设置全局配置，包括基础URL、超时时间和取消请求功能，以及如何使用请求和响应拦截器来处理HTTP请求。同时，给出了一个HTTPConfig接口和useHttp函数的实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重要全局配置：
- 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
})

// 设置接口响应拦截器：