axios get带参数的请求方法

最新推荐文章于 2025-05-11 20:04:22 发布

原创最新推荐文章于 2025-05-11 20:04:22 发布 · 8.2w 阅读

111 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了在Vue.js项目中如何使用axios进行GET带参数的请求。内容包括axios POST和GET请求的区别，以及GET请求中如何封装和使用带参数的方法，展示了params对象的使用方式以及请求URL的构成。

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

最近在自己写的项目中遇到get带参数请求的axios封装，记录一下使用的方法.方便下次查看。
因为axios的post和get带参数的请求方法是不大一样的。

下面是post的参数请求
post带参数请求

这个是get带参数的请求
封装的方法
由上面可以看出post和get带参数请求中两者的区别。

下图是调用带参数请求的方法。
其中params是一个对象，里面是你需要上传的参数，比如我这里需要上传的参数是page和limit
发起请求的方法

在请求的方法中可以获取到传过来的params对象
在这里插入图片描述

请求的url如下图

下面是其它的请求方法

import axios from 'axios'
//不懂axios可以看看官网
/*https://www.kancloud.cn/yunye/axios/234845*/
let base = '/hr'

// 带参数的post请求
function postRequest(url, params) {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
    })
}

//  没有baseURL的不带参数的post请求
function postRequest0(url) {
    return axios({
        method: 'post',
        url: `${url}`
    })
}

// 不带参数的post请求
function postRequest1(url) {
    return axios({
        method: 'post',
        url: `${base}${url}`
    })
}

// 不带参数的get请求
function getRequest(url) {
    return axios({
        method: 'get',
        url: `${base}${url}`
    })
}

// 带参数的get请求
function getRequest1(url, params) {
    let page = params.page
    return axios({
        method: 'get',
        url: `${base}${url}`,
        params: {
            page: page,
            limit: 6
        }
    })
}

// 不带参数的put请求
function putRequest(url) {
    return axios({
        method: 'put',
        url: `${base}${url}`,
    })
}

// 带参数的put请求
function putRequest1(url, params) {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}

export default {
    postRequest0,
    postRequest,
    postRequest1,
    getRequest,
    getRequest1,
    putRequest,
    putRequest1
}