vue3+ts | axios 二次封装

安装 pnpm i axios

axios 二次封装

TypeScript 复制代码
// 实用性工具文件 放于 utils文件中
// 对axios函数库进行二次封装?
// 二次封装的目的?利用axios请求、响应拦截器    
 
import axios from 'axios'

// axios.create 创建一个axios实例:可以设置基础路径,超时时间的设置
const request = axios.create({
    baseURL: '/api',    // 请求的基础路径设置
    timeout: 5000       // 超时时间的设置,超出五秒请求是失败的
})

// 请求拦截器
request.interceptors.request.use((config) => {
    // config: 请求拦截器回调注入的对象(配置对象),配置对象的身上最重要的headers属性
    // 可以通过请求头携带公共参数 -token
    return config;
})
// 响应拦截器
request.interceptors.response.use((response)=>{
    return response;        //响应拦截器成功的回调,一般会简化数据
},(error)=>{
    // 失败处理,如 处理http网络错误
    return Promise.reject(new Error(error.message))
});

// 务必对外暴露axios 才可使用 
export default request;

配置代理跨域

vite.config.ts文件中,加入下列代码,配置完重启(重新运行 pnpm run dev)

javascript 复制代码
// 配置代理跨域
  server:{
    proxy: {
      '/api': {
        target: 'http://syt.atguigu.cn',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/,'')
      }
    }
  }
相关推荐
乌啼霜满天2494 分钟前
JDBC编程---Java
java·开发语言·sql
Myli_ing15 分钟前
考研倒计时-配色+1
前端·javascript·考研
色空大师17 分钟前
23种设计模式
java·开发语言·设计模式
余道各努力,千里自同风17 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave24 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟26 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
Bruce小鬼30 分钟前
QT文件基本操作
开发语言·qt
2202_7544215435 分钟前
生成MPSOC以及ZYNQ的启动文件BOOT.BIN的小软件
java·linux·开发语言
我只会发热42 分钟前
Java SE 与 Java EE:基础与进阶的探索之旅
java·开发语言·java-ee
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js