vue中的axios请求工具类

vue中的axios请求工具类

代码展示

// 引入axios
import axios from 'axios';

// 创建axios实例
const httpService = axios.create({
  // url前缀-'http:xxx.xxx'
  // baseURL：向后台发请求的时候我们可以提前设置一下后台基准的请求地址，这样后面再发请求的时候，只需要写后面的路径就可以了。
  baseURL:'http://localhost:80/',
  // 请求超时时间
  timeout: 3000 // 需自定义
});

//添加请求和响应拦截器
// 添加请求拦截器
httpService.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.token=window.sessionStorage.getItem('token');
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
httpService.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

/*网络请求部分*/

/*
 *  get请求
 *  url:请求地址
 *  params:参数
 * */
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'get',
      params: params
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
}

/*
 *  post请求
 *  url:请求地址
 *  params:参数
 * */
export function post(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'post',
      data: params
    }).then(response => {
      console.log(response)
      resolve(response);
    }).catch(error => {
      console.log(error)
      reject(error);
    });
  });
}

/*
 *  文件上传
 *  url:请求地址
 *  params:参数
 * */
export function fileUpload(url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'post',
      data: params,
      headers: { 'Content-Type': 'multipart/form-data' }
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
}

export default {
  get,
  post,
  fileUpload
}

通过这样以后，在Vue的其他组件中就可以通过导入该工具类，直接使用 get,post, fileUpload, getServeUrl等方法。
例如：

<script setup>
//导入工具类
import  axiosUtil,{getServeUrl} from '@/util/axios'

const queryForm=ref({
  query:'',
  pageNum:1,
  pageSize:10
});

const initBigTypeList=async ()=>{
//这里的请求地址为
  const res=await axiosUtil.post("admin/bigtype/list",queryForm.value)
}
</script>

代码详解（以post为例）

1、导入 Axios：

import axios from "axios";

这行代码导入 Axios 库，并将其命名为 “axios”，使得它在当前模块中可用。

2、定义基础 URL 和创建 Axios 实例：

let baseUrl = 'http://localhost:8080/';
const httpServer = axios.create({
    baseURL: baseUrl, // 设置所有请求的基础 URL
    timeout: 3000 // 设置请求的最大超时时间（以毫秒为单位）
});

这里，baseUrl 变量被设置为 “http://localhost:8080/”，它将作为所有使用该 Axios 实例的请求的基础 URL。httpServer 常量是通过调用 axios.create() 创建的，它使用指定的配置返回一个新的 Axios 实例。
3、创建 POST 请求的函数：

export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpServer({
            url: url, // POST 请求的 URL
            data: params, // 可选，要发送的请求数据
            method: "POST" // HTTP 请求方法（这里是 POST）
        }).then(response => {
            console.log(response); // 将响应数据打印到控制台
            resolve(response); // 使用响应数据来解决 Promise
        }).catch(error => {
            console.log(error); // 将任何错误打印到控制台
            reject(error); // 使用错误对象来拒绝 Promise
        });
    });
}

post 函数用于使用之前定义的 Axios 实例 httpServer 发起 POST 请求。它接受两个参数：

• url：要发起 POST 请求的 URL。
• params（可选）：一个表示要随请求发送的数据的对象，作为请求的负载。
• 在函数内部，我们创建了一个新的 Promise 来处理 HTTP 请求的异步特性。使用 httpServer 调用请求，并提供给定的 url、data 和 “POST” 方法。然后使用 then(为请求成功时调用、) 和 catch 方法处理请求的结果。

如果请求成功，then 块将响应数据打印到控制台，并使用 resolve(response) 来解决 Promise，将响应数据传递出去。如果请求出现错误，catch 块将错误打印到控制台，并使用 reject(error) 来拒绝 Promise，将错误对象传递出去。

4、导出 post 函数：

export default {
    get,
    post,
    fileUpload,
    getServeUrl
}

post 函数被导出，这样在其他模块中导入这个文件后，就可以使用这个函数进行 HTTP POST 请求了。

实际post请求的地址会自动将baseUrl 和post方法中传入的url进行拼接

在 httpServer 实例的创建过程中，我们通过 axios.create() 方法设置了 baseURL，它作为所有使用该 Axios 实例发起的请求的基础 URL。因此，无论传入的 url 是什么，Axios 都会自动将其与 baseUrl 进行拼接，形成最终的请求地址。

例如，在代码中调用 post 方法时，假设传入的 url 参数为 “/api/data”，而 baseUrl 是 “http://localhost:8080/”，那么实际的请求地址会是 “http://localhost:8080/api/data”。

这种拼接方式非常方便，可以在不同的请求中复用同一个 Axios 实例，并只需提供特定的 url 参数即可。这样也能避免在每次发起请求时手动拼接完整的 URL 地址，使代码更加简洁和易于维护。