面试题:项目中如何封装axios请求

项目中如何封装axios请求

项目中如何封装axios请求

在前端中,我们通常会使用 axios 这个库来进行 HTTP 请求。为了方便管理和复用,我们可以对 axios 请求进行封装。目的是用来方便复用

  • 我们通过 axios.create() 方法创建了一个 axios 实例,设置了基础 URL、超时时间和请求头信息。

  • 然后,我们对这个实例设置了请求拦截器和响应拦截器,用于在请求和响应过程中做一些统一的处理

  • 最后,我们通过导出一个包含常用请求方法的对象来对 axios 进行了封装

    import axios from 'axios'
    
    const aa = axios.create({
      baseURL: 'https://api.example.com',
      timeout: 5000,
      headers: {
        'Content-Type': 'application/json'
      }
    })
    
    // 请求拦截器
    aa.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      //例如  判断是否存在token,如果存在将每个页面header都添加token
      return config
    }, error => {
      // 对请求错误做些什么
      
      return Promise.reject(error)
    })
    
    // 响应拦截器
    aa.interceptors.response.use(response => {
      // 对响应数据做些什么
      // 例如  如果是401错误,说明token没有 或 过期,就跳转登录页
      return response.data
    }, error => {
      // 对响应错误做些什么
      return Promise.reject(error)
    })
    
    

什么是请求拦截?什么是响应拦截?

请求拦截器和响应拦截器是 axios 提供的拦截器机制,用于在 HTTP 请求和响应的过程中,对请求和响应进行统一的处理。

请求拦截:

请求拦截是在发送请求之前进行拦截请求,并且在请求发送出去之前进行修改。

在请求拦截中,我们可以对请求头进行统一的设置,对请求参数进行加密或者是验证的操作

响应拦截:

响应拦截是在接收到响应之后进行拦截,并在响应被处理之前进行修改

请求结果返回时,先不直接导出,而是对响应数据先进行处理

同时,响应拦截器还可以处理网络请求的异常情况

总之,请求拦截器和响应拦截器是 axios 提供的非常有用的拦截器机制,能够帮助我们统一处理 HTTP 请求和响应,提高代码的复用性和可维护性,同时还能够提高应用程序的健壮性和稳定性。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值