项目中如何封装axios请求

文章目录

• 项目中如何封装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都添加tokenreturn 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 请求和响应，提高代码的复用性和可维护性，同时还能够提高应用程序的健壮性和稳定性。