axios常用配置

Axios 是一个基于 promise 的 HTTP 库,广泛用于浏览器和 node.js 中。以下是一些 Axios 常用的配置选项:

  1. url: 字符串,请求的服务器URL,是必填项。
  2. method: 请求方法,如 ‘get’, ‘post’, ‘put’, ‘delete’ 等,默认为 ‘get’。
  3. baseURL: 字符串,基础URL,会自动添加到每个请求的URL前面,除非URL是绝对的。
  4. transformRequest: 函数数组,允许在请求发送到服务器之前对请求数据进行预处理。
  5. transformResponse: 函数数组,允许在响应数据传递给 then/catch 之前进行处理。
  6. headers: 对象,自定义请求头信息,比如设置 Content-Typeapplication/json
  7. params: 对象,用于 ‘get’ 请求的查询参数,这些参数会被附加在URL后面。
  8. data: 对象/字符串,用于 ‘post’, ‘put’, ‘patch’ 等请求的请求体数据。
  9. timeout: 数值,设置请求超时时间,单位为毫秒。
  10. withCredentials: 布尔值,默认为 false,表示跨域请求时是否携带cookie凭证。
  11. responseType: 字符串,设置响应的数据类型,如 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’,默认为 ‘json’。
  12. maxContentLength: 设置响应内容的最大值,单位为字节,超出此限制会抛出错误。
  13. validateStatus: 函数,允许自定义确定HTTP请求的成功状态码范围,默认为 status >= 200 && status < 300
  14. xsrfCookieName: 字符串,用作 xsrf token 的值的cookie名称,默认为 ‘XSRF-TOKEN’。
  15. xsrfHeaderName: 字符串,携带xsrf token值的http头名称,默认为 ‘X-XSRF-TOKEN’。

这些配置选项可以作为参数直接传递给 Axios 的请求方法,也可以在创建 Axios 实例时作为配置对象的一部分,以便在所有通过该实例发起的请求中共享这些配置。例如:

axios.get('/api/data', {
  params: {
    id: 123
  },
  headers: {
    'Authorization': 'Bearer your_token'
  }
});

// 或者创建一个实例并设置默认配置
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/data');

了解并熟练使用这些配置选项可以帮助你更好地控制请求的各个方面,以满足不同的应用场景需求。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
axios是现在前端开发中最主流的网络请求库之一,常用于请求后端API接口。虽然axios本身已提供了很好的配置及封装接口,但在实际项目开发中,我们还是需要针对项目的需要进行一些额外的封装和配置常用配置 1. baseURL:设置默认请求的url,方便统一管理。 2. timeout:设置请求超时时间。 3. withCredentials:设置是否携带cookie。 4. headers:设置请求头信息,如token等。 5. responseType:设置返回数据的类型。 常用封装 1. 请求拦截器:在请求发送之前进行一些处理,如设置请求头,loading等。 ``` axios.interceptors.request.use(config => { // do something return config; }, error => { return Promise.reject(error) }); ``` 2. 响应拦截器:在请求返回之后进行一些处理,如对返回状态码做统一处理。 ``` axios.interceptors.response.use(response => { // do something return response; }, error => { return Promise.reject(error) }); ``` 3. 错误处理:对接口请求出错进行统一处理,如弹窗提示等。 ``` function errorHandler(error) { // do something return Promise.reject(error); } axios.get(url).then(response => { // do something }).catch(error => { errorHandler(error); }); ``` 4. 封装请求方法:根据具体场景,将常用的请求方法进行封装,方便调用。 ``` function get(url, params) { return axios.get(url, { params }) } function post(url, data) { return axios.post(url, data) } ``` 5. 配置化封装:根据项目需要,将axios配置及封装放到一个统一的文件中,方便管理。 ``` import axios from 'axios'; import qs from 'qs'; // 设置默认请求url axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; // 请求拦截器 axios.interceptors.request.use(config => { // do something return config; }, error => { return Promise.reject(error) }); // 响应拦截器 axios.interceptors.response.use(response => { // do something return response; }, error => { return Promise.reject(error) }); // 封装请求方法 function get(url, params) { return axios.get(url, { params }) } function post(url, data) { return axios.post(url, qs.stringify(data)) } export default { get, post } ``` 综上所述,axios配置及封装对于提高开发效率和项目的可维护性非常重要。在实际项目开发中,我们需要根据具体需要对axios进行适当的封装和配置,使其更符合项目的实际需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值