vue3 typescript axios拦截器

封装request

// src/utils/request.ts
import axios, { AxiosResponse, InternalAxiosRequestConfig } from "axios"
import { ElMessage } from "element-plus"
import { getToken, removeToken } from "@/utils/auth"

//创建axios实例对象,添加全局配置
const service = axios.create({
  baseURL: '/api', 
  timeout: 8000,
})

//请求拦截
service.interceptors.request.use((config: InternalAxiosRequestConfig): InternalAxiosRequestConfig<any> => {
  if (getToken()) {
    config.headers["Authorization"] = "Bearer " + getToken()
  }

  if (config.headers["Content-Type"] == "application/x-www-form-urlencoded") {
    config.data = JSON.stringify(config.data)
  }
  return config
})

// 响应拦截
service.interceptors.response.use(
  (response: AxiosResponse) => {
    const { data, status, statusText, config } = response
    if (status !== 200 || data.code !== 200) {
      if (data.code === 401) {
        // 未登陆
        ElMessage.error("未登陆")
        removeToken()
        location.reload()
      }
      ElMessage.error(data.message)
      return Promise.reject(data.message)
    }
    // 直接返回后端data的数据,后端数据格式{code:200, message:"", data: []}
    return data
  },
  (error) => {
    ElMessage.error("网络异常,请稍候再试")
    // 在响应错误的时候的逻辑处理
    return Promise.reject(error)
  }
)
export default service

使用拦截器

import request from "@/utils/request"
request.get(url[, config])
request.delete(url[, config])
request.head(url[, config])
request.options(url[, config])
request.post(url[, data[, config]])
request.put(url[, data[, config]])
request.patch(url[, data[, config]])
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在 Vue 3 中使用 TypeScript 封装 axios 需要遵循以下步骤: 1. 安装 axios 和 @vue/cli-plugin-typescript: ``` npm install axios @vue/cli-plugin-typescript ``` 2. 在 Vue 项目的 main.ts 中导入 axios 并将其设置为 Vue.prototype 的一个属性,以便在组件中使用时可以直接访问: ``` import axios from 'axios'; Vue.prototype.$axios = axios; ``` 3. 在需要使用 axios 的组件中导入 axios: ``` import { AxiosInstance } from 'axios'; export default class MyComponent extends Vue { // 声明 $axiosAxiosInstance 类型 private $axios!: AxiosInstance; // 在组件中使用 axios async someMethod() { const response = await this.$axios.get('/some/endpoint'); // 处理响应 } } ``` 这样就可以在 Vue 3 项目中使用 TypeScript 封装 axios 了。 ### 回答2: 为了在Vue 3中使用TypeScript来封装Axios,我们可以按照以下步骤进行操作。 首先,我们需要安装axios和@types/axios依赖包。我们可以使用以下命令进行安装: ``` npm install axios npm install @types/axios ``` 接下来,我们可以创建一个api.ts文件来封装Axios。在这个文件中,我们可以定义Axios实例,并且可以在我们的项目中复用它。 ```typescript import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; // 创建Axios实例 const instance: AxiosInstance = axios.create({ baseURL: 'https://api.example.com', // 根据实际情况设置基础URL }); // 请求拦截器 instance.interceptors.request.use( (config: AxiosRequestConfig): AxiosRequestConfig => { // 添加请求头等处理逻辑 return config; }, (error: any) => { return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response: AxiosResponse): AxiosResponse => { // 处理响应数据等逻辑 return response; }, (error: any) => { return Promise.reject(error); } ); export default instance; ``` 现在,我们可以在Vue组件中使用这个封装的Axios实例。我们可以在组件中导入该实例,并使用它来发送请求。 ```typescript import { defineComponent } from 'vue'; import api from './api.ts'; export default defineComponent({ methods: { fetchData() { api.get('/data') .then((response) => { // 处理响应数据 }) .catch((error) => { // 处理错误 }); }, }, }); ``` 通过以上步骤,我们成功封装了Axios,并在Vue 3中使用TypeScript进行了使用和复用。这样做可以提高代码的可维护性和可读性,并且方便我们对请求和响应进行统一的处理。 ### 回答3: 在Vue3中使用TypeScript封装Axios可以方便地进行网络请求。以下是一个简单的示例: 首先,安装axios和@types/axios包: ``` npm install axios npm install @types/axios ``` 然后,创建一个axios实例的封装文件,例如api.ts: ```typescript import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com', // 根据实际情况设置基本URL timeout: 5000, // 设置超时时间 }); // 请求拦截器,可以在发送请求之前做一些处理,例如添加token等 instance.interceptors.request.use( (config) => { // 在发送请求之前做些什么 return config; }, (error) => { // 对请求错误做些什么 return Promise.reject(error); } ); // 响应拦截器,可以在接收到响应之后做一些处理,例如统一处理错误等 instance.interceptors.response.use( (response) => { // 对响应数据做些什么 return response.data; }, (error) => { // 对响应错误做些什么 return Promise.reject(error); } ); export default instance; ``` 接下来,在需要使用网络请求的组件中,可以引入此封装文件,并调用相应的方法进行请求: ```typescript import { defineComponent } from 'vue'; import api from './api'; export default defineComponent({ setup() { const fetchData = async () => { try { const response = await api.get('/endpoint'); // 发送GET请求 console.log(response); } catch (error) { console.error(error); } }; return { fetchData }; }, }); ``` 这样,就可以在Vue3中使用TypeScript封装Axios进行网络请求了。需要注意的是,上述仅是一个简单的示例,实际开发中可以根据需要进一步封装和处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值