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/,'')
      }
    }
  }
相关推荐
喝拿铁写前端1 分钟前
智能系统的冰山结构
前端
z_mazin6 分钟前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
Xiaok10188 分钟前
解决 Hugging Face SentenceTransformer 下载失败的完整指南:ProxyError、SSLError与手动下载方案
开发语言·神经网络·php
绿草在线10 分钟前
Mock.js虚拟接口
开发语言·javascript·ecmascript
go_bai21 分钟前
Linux环境基础开发工具——(2)vim
linux·开发语言·经验分享·笔记·vim·学习方法
小郝 小郝22 分钟前
【C语言】strstr查找字符串函数
c语言·开发语言
yinhezhanshen27 分钟前
理解rust里面的copy和clone
开发语言·后端·rust
Jtti43 分钟前
PHP在Debian环境上的并发处理能力如何
开发语言·debian·php
时光追逐者1 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
独好紫罗兰1 小时前
洛谷题单3-P5718 【深基4.例2】找最小值-python-流程图重构
开发语言·python·算法