记录一个自己用的Axios二次封装源码主要设计一些baseUrl和响应的数据解构

目前主要实现:
基础路径
超时时间
请求拦截
响应拦截时结构一层data
同时暴露一个request函数,指定默认的请求方式,并且当请求为GET时将data转化成params

/**
 * 封装axios请求
 */
import axios from "axios";
//创建axios实例对象,添加全局配置
const service = axios.create({
  baseURL: 'http://localhost:9999',
  timeout: 5000,
});

//请求拦截
service.interceptors.request.use((req) => {
  //TODO:这里做一些请求拦截的处理
  const headers = req.headers; //获取请求头
  return req; //返回请求对象
});

//响应拦截
service.interceptors.response.use((res) => {
  //TODO:这里做一些响应拦截
  return res.data; //若请求返回状态码为200,直接返回data数据,不用再返回响应对象res
});
/**
 * 请求核心函数
 * @param {*} options 请求配置
 * @returns axios实例对象
 */
function request(options:any) {
  options.method = options.method || "get"; //默认为get请求方法
  if (options.method.toLowerCase() === "get") {
    //如果为get请求方法,需要将data转化为params
    options.params = options.data; // 这样子get和post都直接把参数放到data里面就好了
  }
  return service(options); //返回一个Promise对象
}

//导出axios实例对象
export default request;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值