Vue3中如何封装axios请求并实现请求与响应拦截？

本文共计868个文字，预计阅读时间需要4分钟。

目录+前言+axios请求封装+请求拦截和响应拦截+接口的请求+总结+前言+将axios放在Service.js中封装，方便使用axios.create的作用是创建一个新的axios实例，该实例可以包含自定义配置。

目录

• 前言
• axios请求封装
• 请求拦截和响应拦截
• 接口的请求
• 总结

前言

对于三者放在Service.js中封装，方便使用

axios.create的作用是创建一个新的axios实例，该实例可以具有自定义配置。通过使用axios.create，您可以为任何 API 生成一个客户端，并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加方便，因为您可以为每个 API 创建一个单独的实例，并在每个实例中设置不同的配置。

axios.create方法接受一个配置对象作为参数，该对象包含以下属性：

• baseURL：用于所有请求的基本 URL。
• headers：要发送的自定义 headers。
• timeout：指定请求超时之前的毫秒数。
• withCredentials：指示是否应该使用跨站点访问控制（CORS）凭据。
• xsrfCookieName：用作 xsrf 令牌值的cookie的名称。
• xsrfHeaderName：包含 xsrf 令牌值的 HTTP 头的名称。