axios------配置详解

本文详细介绍了Axios库的配置参数,包括url、method等,并解释了如何使用这些配置来优化HTTP请求。此外还介绍了如何利用拦截器进行请求的统一处理。

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

Axios的配置参数很多,我们来一一了解

  • url —— 用来向服务器发送请求的url
  • method —— 请求方法,默认是GET方法
  • baseURL —— 基础URL路径,假如url不是绝对路径,如https://some-domain.com/api/v1/login?name=jack,那么向服务器发送请求的URL将会是baseURL + url。
  • transformRequest —— transformRequest方法允许在请求发送到服务器之前修改该请求,此方法只适用于PUT、POST和PATCH方法中。而且,此方法最后必须返回一个string、ArrayBuffer或者Stream。
  • transformResponse —— transformResponse方法允许在数据传递到then/catch之前修改response数据。此方法最后也要返回数据。
  • headers —— 发送自定义Headers头文件,头文件中包含了http请求的各种信息。
  • params —— params是发送请求的查询参数对象,对象中的数据会被拼接成url?param1=value1&param2=value2。
    paramsSerializer —— params参数序列化器。
  • data —— data是在发送POST、PUT或者PATCH请求的数据对象。
  • timeout —— 请求超时设置,单位为毫秒
  • withCredentials —— 表明是否有跨域请求需要用到证书
  • adapter —— adapter允许用户处理更易于测试的请求。返回一个Promise和一个有效的response
  • auth —— auth表明提供凭证用于完成http的身份验证。这将会在headers中设置一个Authorization授权信息。自定义Authorization授权要设置在headers中。
  • responseType —— 表示服务器将返回响应的数据类型,有arraybuffer、blob、document、json、text、stream这6个类型,默认是json类似数据。
  • xsrfCookieName —— 用作 xsrf token 值的 cookie 名称
  • xsrfHeaderName —— 带有 xsrf token 值 http head 名称
  • onUploadProgress —— 允许在上传过程中的做一些操作
  • onDownloadProgress —— 允许在下载过程中的做一些操作
  • maxContentLength —— 定义了接收到的response响应数据的最大长度。
  • validateStatus —— validateStatus定义了根据HTTP响应状态码决定是否接收或拒绝获取到的promise。如果 validateStatus 返回 true (或设置为 null 或 undefined ),promise将被接收;否则,promise将被拒绝。
  • maxRedirects —— maxRedirects定义了在node.js中redirect的最大值,如果设置为0,则没有redirect。
  • httpAgent —— 定义在使用http请求时的代理
  • httpsAgent —— 定义在使用https请求时的代理
  • proxy —— proxy定义代理服务器的主机名和端口,auth
  • cancelToken —— cancelToken定义一个 cancel token 用于取消请求

统一Config配置

在接口测试中,我们经常需要切换线上环境和测试环境,这里我们都可以通过Config来配置,这样我们所有的发起的请求都是通过这个基本的URL走了。

      
1
2
3
      
axios.defaults.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://www.xxxx.xxx/api';
// axios.defaults.baseURL = 'http://192.168.1.129:8383';

Interceptors 拦截器

这里我必须重点介绍,在我们发起大量的请求时候,需要对请求做统一的处理那就用到它了。笔者在使用了vue-resourceaxios之后亲身比较,axios的配置更加人性化。
官方的API上这样介绍

You can intercept requests or responses before they are handled by then or catch.
您可以拦截请求或响应之前,他们处理的操作或者异常

request统一处理操作

如果是POST的请求,配置中可不能用params字段了,需要使用data字段。
这里有个小地方需要注意,POST的传参需要序列化,不然服务端不会正确的接收哦,会报错。所以这里我们要对request的数据进行一次序列化。

请求方法别名

下面是axios支持的所有请求方法别名,便于各种请求。 注:[...]中的数据表示可以为空。url是ajax请求地址;data是提交的数据对象;config是配置对象,所有ajax配置都可以在config中实现。

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

并发性

下列接口用于处理并发请求(同时处理多个多个request)

  • axios.all(iterable)
  • axios.spread(callback)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值