Vue使用axios进行get请求拼接参数的2种方式详解

Vue使用axios进行get请求拼接参数的2种方式详解

在Vue中，使用axios进行数据请求是很常见的操作。其中，get请求拼接参数的方式有两种。

第一种方式：通过拼接字符串

在进行get请求时，可以使用axios的params选项，手动将参数拼接到url后面，代码示例如下：

import axios from 'axios'

axios.get('/api/someData', {
    params: {
        id: 1,
        name: '张三'
    }
}).then(response => {
    console.log(response)
}).catch(error => {
    console.log(error)
})

在这个例子中，我们使用axios的get方法请求了url为/api/someData的数据，并且在params选项中传入了id和name两个参数。

实际url的地址将会是/api/someData?id=1&name=张三。

这种方式简单明了，但是如果参数比较多，拼接字符串的方式就比较繁琐了。

第二种方式：通过对象的方式

第二种方式是使用axios的params序列化参数的方式，让axios自动将参数拼接到url后面。代码示例如下：

import axios from 'axios'

axios({
    method: 'get',
    url: '/api/someData',
    params: {
        id: 1,
        name: '张三'
    }
}).then(response => {
    console.log(response)
}).catch(error => {
    console.log(error)
})

在这个例子中，我们使用axios的对象方式请求了url为/api/someData的数据，并且在params选项中传入了id和name两个参数。

实际url的地址将会是/api/someData?id=1&name=张三。

这种方式可以直接使用axios的对象方式，在params选项中传入参数，让axios自动将参数拼接到url后面，不容易出错，推荐使用。

以上是“Vue使用axios进行get请求拼接参数的2种方式详解”的攻略，希望对你有帮助。