axiosparams你需要知道的全部

发布时间：2023-05-20

一、params是什么？

1、axios是一个基于promise的HTTP库，支持浏览器和node.js运行环境 2、params是axios支持的一种传参方式，是通过query string参数传递的，即对应于URL的?后面的key=value参数对 3、在get请求中，params会直接添加到URL中，如http://localhost/user?id=123，而在post请求中则会作为request body请求体发送

二、传参方式

1、get请求传参

axios.get('/user', {
  params: {
    id: 123
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

2、post请求传参

axios.post('/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

三、多个参数传递方式

1、在get请求中，可以使用数组形式，如

axios.get('/user', {
  params: {
    ids: [1, 2, 3]
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

2、或者是使用对象形式，如

axios.get('/user', {
  params: {
    id: {'key1': 'value1', 'key2': 'value2'}
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

四、params拦截器

1、在发送请求前，可以设置拦截器对传参进行处理，如

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.params.id = 123;
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
// 发送get请求
axios.get('/user/', {
  params: {id: 456}
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

2、在上述代码中，我们通过拦截器将请求参数中的id修改为了123，所以最终的请求中id为123而不是456

五、全局默认params

1、在发送请求时，我们可以设置全局默认的请求参数，如

// 在main.js中
axios.defaults.params = {
  token: '123456'
};
// 然后再发送请求
axios.get('/user', {
  params: {
    id: 1
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

2、结果中会出现?token=123456&id=1

六、小结

通过以上阐述，我们了解了params的基本使用方法，包括传参方式、多个参数传递方式、拦截器以及全局默认params。在实际开发中，params的使用会很频繁，熟练使用可以提高开发效率，减少重复代码。

推荐文章