如何在React JS中使用带和不带params的axios实例编写一个GET api调用

Question

我是React JS和Axios的新手。我想了解使用Axios创建GET实例的最佳方法，该方法可以使用params和不使用params。我已经使用axios.create(｛｝(从React开发了一个示例REST API调用，如下所示，它运行良好。

import axios from 'axios';
const instance = axios.create({
baseURL: 'example.com'
});
export default {
getAllData: (url) =>
instance({
'method': 'GET',
'url': url
})
}

我的要求是创建一个可以使用和不使用params的axios GET实例，我可以通过创建两个不同的函数来实现它，如下所示：

export default {
getAllData: (url) =>
instance({
'method': 'GET',
'url': url
}),

getUser: (url, userId) =>
instance({
'method': 'GET',
'url': url,
'params' : userId
})
}

有没有任何方法可以在React JS中使用Axios创建一个可以使用和不使用params的GET函数？

Answer 1

您可以这样做：

getUser: (url, userId) =>
instance({
'method': 'GET',
'url': url,
...(userId && {'params' : userId})
})

如果userId存在，它将把{'params': userId}对象附加到当前对象上。

Answer 2

您不必创建两个不同的方法。如果不传递userId参数，它将为null，并且不会传递给API调用。

你可以使用这个代码：

import axios from 'axios';
// Set Global default
axios.defaults.baseURL = 'example.com';
const getData = (url, userId) => axios(url, userId);
export default getData;

您可以使用userId:进行呼叫

getData('/user', userId);

或不带：

getData('/user');

Answer 3

这就是你可以做到的：

export default {
getUser: (url, userId) =>
instance.get(url, {
...(userId && {'params' : userId})
})
}

Answer 4

axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})