宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

Axios是一个流行的基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。使用Axios可以轻松地发送HTTP请求，并且可以使用拦截器、校验器和转换器等功能处理请求和响应。在使用Axios发送请求时，需要传递不同类型的参数，本篇文章将详细介绍Axios传参的各种类型和使用方法。

一、URL参数

URL参数是指在URL中包含的参数，通常用于GET请求中。在Axios中，URL参数可以使用params属性来添加。例如：


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

上述代码中，params属性将id和name两个参数添加到URL中，最终请求的URL为”/api/data?id=123&name=John”。在发送请求时，params属性会将参数序列化为URL参数，并将其添加到请求的URL中。使用params属性添加URL参数时，参数会自动编码，无需手动编码。

二、查询字符串参数

查询字符串参数是指在请求体中包含的参数，通常用于POST、PUT和PATCH请求中。在Axios中，查询字符串参数可以使用params属性来添加。

例如：


axios.post('/api/data', {
  id: 123,
  name: 'John'
}, {
  params: {
    token: 'abc123'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上述代码中，params属性将token参数添加到查询字符串中，最终请求的请求体为”id=123&name=John&token=abc123″。使用params属性添加查询字符串参数时，参数会自动编码，无需手动编码。

三、请求体参数

请求体参数是指在请求体中包含的参数，通常用于POST、PUT和PATCH请求中。在Axios中，请求体参数可以使用data属性来添加。例如：


axios.post('/api/data', {
  id: 123,
  name: 'John'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上述代码中，data属性将id和name两个参数添加到请求体中，最终请求的请求体为{“id”: 123, “name”: “John”}。

在使用Axios发送POST、PUT和PATCH请求时，需要指定请求体的编码方式。Axios支持多种编码方式，包括application/json、application/x-www-form-urlencoded和multipart/form-data。可以使用headers属性来指定编码方式。例如：


axios.post('/api/data', {
  id: 123,
  name: 'John'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上述代码中，headers属性指定请求体的编码方式为application/json。

四、请求头参数

请求头参数是指在请求头中包含的参数，例如Authorization参数、User-Agent参数和Referer参数等。在Axios中，请求头参数可以使用headers属性来添加。例如：


axios.get('/api/data', {
  headers: {
    Authorization: 'Bearer abc123',
    'User-Agent': 'Mozilla/5.0',
    Referer: 'http://www.example.com'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上述代码中，headers属性指定了三个请求头参数：Authorization、User-Agent和Referer。

五、请求配置参数

请求配置参数是指与请求相关的其他参数，例如请求超时时间、请求重试次数和跨域请求配置等。在Axios中，请求配置参数可以使用config属性来添加。例如：


axios.get('/api/data', {
  config: {
    timeout: 5000,
    retry: 3,
    crossDomain: true
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上述代码中，config属性指定了三个请求配置参数：timeout、retry和crossDomain。

六、拦截器

Axios提供了拦截器功能，可以在发送请求和响应之前对其进行拦截。在Axios中，可以使用interceptors属性来添加拦截器。例如：


axios.interceptors.request.use(function (config) {
  config.headers.Authorization = 'Bearer abc123';
  return config;
});

axios.interceptors.response.use(function (response) {
  return response.data;
});

上述代码中，使用interceptors属性添加了两个拦截器，一个是请求拦截器，一个是响应拦截器。请求拦截器添加了Authorization请求头参数，响应拦截器返回了响应体中的data属性。

七、取消请求

Axios提供了取消请求的功能，可以在发送请求时取消请求。在Axios中，可以使用CancelToken属性来添加取消请求功能。例如：


var source = axios.CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.log(error);
  }
});

// 取消请求
source.cancel('Canceled by the user.');

上述代码中，使用CancelToken属性添加了取消请求功能。在发送请求时，将cancelToken属性设置为一个新的CancelToken对象的token属性，然后调用CancelToken对象的cancel方法可以取消请求。在catch块中，使用axios.isCancel方法判断是否是取消请求。

八、错误处理

Axios使用Promise处理请求和响应，因此可以在then和catch块中对请求和响应进行处理。例如：


axios.get('/api/data')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上述代码中，使用then块和catch块处理请求和响应。在catch块中，可以使用error对象的message和response属性来获取错误信息。

九、总结

本篇文章介绍了Axios传参的各种类型和使用方法，包括URL参数、查询字符串参数、请求体参数、请求头参数、请求配置参数、拦截器、取消请求和错误处理等。使用Axios可以轻松地发送HTTP请求，并且可以使用拦截器、校验器和转换器等功能处理请求和响应。在使用Axios发送请求时，需根据实际情况选择合适的传参方式，并对请求和响应进行适当的处理。