ai问答:使用 Vue3 组合式API 和 TS 配置 axios 拦截器 http错误状态

Posted 掌舵者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ai问答:使用 Vue3 组合式API 和 TS 配置 axios 拦截器 http错误状态相关的知识,希望对你有一定的参考价值。

配置 axios 拦截器和http错误状态,可以避免在每个请求方法中都添加冗余的错误处理逻辑,这是拦截器的优势之一

通过 axios.create() 可以创建一个 axios 实例 axiosInstance,参数如下:

  • baseURL:请求前缀
  • timeout:超时时间
  • headers:请求头

默认配置:

import  defineComponent  from \'vue\'
import axios from \'axios\'

export default defineComponent(
  setup() 

    // 实例 - 默认配置
    const axiosInstance = axios.create(
      baseURL: \'https://some-domain.com/api/\',
      timeout: 1000,
      headers:  
        Authorization: \'Bearer some-token\'
      
    )

    // 简单封装 - get
    function get(url: string) 
        return axiosInstance.get(url).then(res => 
            console.log(res.data)
            return res
        ).catch(err => 
            console.log(\'Axios error:\', err.message)
            return err
        )
    

    // 暴露其他方法 ...

    return 
      get
      // ...
    
  
)

然后,getpost等方法调用的都是这个 axios 实例,所有请求都会默认使用这些配置。

这可以使我们实现诸如:

  • 不同环境使用不同 baseURL
  • 需要鉴权的请求自动添加 Authorization 请求头
  • 配置统一的超时时间避免请求延迟

axios 支持通过 axios.interceptors 配置拦截器。

添加了请求拦截器后,每次调用 axiosInstance 发出的请求都会先通过请求拦截器。
我们可以在这里做一些公共的操作,如:

  • 添加请求头
  • 显示加载动画
  • 存储请求日志等
// 拦截器 - request 请求
axiosInstance.interceptors.request.use(config => 
    let test = 
        vue_token: \'Abc123\',
        type: \'json\'
    ;
    if (test.vue_token) 
        config.headers[\'Authorization\'] = `Bearer $test.vue_token`
    
    if (test.type === \'json\') 
        config.headers[\'Content-Type\'] = \'application/json;charset=UTF-8\'
    
    if (test.type === \'file\') 
        config.headers[\'Content-Type\'] = \'multipart/form-data\'
    
    return config;
, err => 
    console.log(err)
    return err
);

在 axios 响应拦截器中检测响应状态码,并在状态码不正确时抛出错误,每次请求得到非 200-300 状态码的响应时,响应拦截器会抛出一个错误,我们可以在请求方法中使用 catch 捕获此错误。

在拦截器中对常见的 HTTP 错误状态码做不同处理,例如:

  • 401 UNAUTHORIZED:未登录,跳转登录页
  • 403 FORBIDDEN:无权限
  • 404 NOT FOUND:资源不存在
  • 500 INTERNAL SERVER ERROR:服务器内部错误等

添加了响应拦截器后,每次请求的响应都会先通过此拦截器。
我们可以在这里做一些公共的操作,如:

  • 处理响应数据
  • 显示/隐藏加载动画
  • 校验响应状态码是否正确
  • 存储响应日志等
// 拦截器 - response 响应
axiosInstance.interceptors.response.use((response) => 
    const status = response.status
    if (status === 401) 
        // 未登录,跳转登录页
        window.location.href = \'/login\'
     else if (status >= 400 && status < 500) 
        throw Error(`Client error! Status: $status`)
     else if (status >= 500) 
        throw Error(`Server error! Status: $status`)
    
    return response
)

现在如果 get 请求得到非正常状态码的响应,就会进入 catch 捕获错误信息。

这些拦截器方便我们处理每一个请求响应周期中的逻辑,减少冗余代码。
拦截器是 axios 中很强大的功能,可以大大提高我们封装 axios 的能力。

组合式api

参考技术A

setup 函数 是 Vue3 中新增的函数,它是我们在编写组件时,使用 Composition API 的入口。
同时它也是 Vue3 中新增的一个生命周期函数,会在 beforeCreate 之前调用。因为此时组件的 data 和 methods 还没有初始化,因此在 setup 中是不能使用 this 的。所以 Vue 为了避免我们错误的使用,它直接将 setup 函数中的 this 修改成了 undefined 。并且,我们只能同步使用setup函数,不能用 async 将其设为异步。

以上是关于ai问答:使用 Vue3 组合式API 和 TS 配置 axios 拦截器 http错误状态的主要内容,如果未能解决你的问题,请参考以下文章

Vue 之 vue3 与 TS 的配合使用整理

感受Vue3的魔法力量

组合式api

使用Vite快速构建Vue3+ts+pinia脚手架

vue3组合式API介绍

vue3的生命周期