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/,'')
      }
    }
  }
相关推荐
Troc_wangpeng1 分钟前
R language 关于二维平面直角坐标系的制作
开发语言·机器学习
王哲晓2 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
努力的家伙是不讨厌的3 分钟前
解析json导出csv或者直接入库
开发语言·python·json
fg_4115 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v6 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
Envyᥫᩣ16 分钟前
C#语言:从入门到精通
开发语言·c#
酷酷的阿云16 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058718 分钟前
web端手机录音
前端
齐 飞24 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
童先生37 分钟前
Go 项目中实现类似 Java Shiro 的权限控制中间件?
开发语言·go