axios的封装

Kevin@wust2025-08-11 17:16

axios的封装

在src目录下新建文件夹utils工具类，文件夹里面新建http.js文件，如果项目涉及到多个基地址可以新建http2.js文件。

c 复制代码

import axios from 'axios';

/**
 * 后端
 */
 
// 创建axios实例
const http = axios.create({
  // 1.接口基地址
  baseURL: 'http://192.168.2.200:8080',
  // 2.接口超时时间
  timeout: 5000,
});

// 3.axios请求拦截器
http.interceptors.request.use(
  (config) => {
    return config;
  },
  (e) => Promise.reject(e)
);

// 4.axios响应式拦截器
http.interceptors.response.use(
  // 响应数据已经去掉了外层的 data 包装
  (res) => res.data,
  (e) => {
    return Promise.reject(e);
  }
);

export default http;

然后我们对应的接口就可以写在src目录下的apis文件夹里面，例如我们新建一个layout.js文件

c 复制代码

import http from '@/utils/http';

/**
 * 页面获取接口
 */

// 获取数据
export function getDataAPI(params) {
  return http({
    url: 'getData',
    params,
  });
}

// 更改数据
export function setDataAPI(data) {
  return http({
    method: 'post',
    url: 'setData',
    data,
  });
}

然后我们在使用的时候就只用进行导入，就可以简单的使用封装过后的接口了。

c 复制代码

import { getDataAPI } from '@/apis/layout';

// ......

// 使用
 const res = await getDataAPI({
          type: '铺缆',
        });
 console.log('数据:', res );