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 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
董先生_ad986ad2 小时前
C# 中的 `lock` 关键字本质
开发语言·c#
元亓亓亓2 小时前
Java后端开发day36--源码解析:HashMap
java·开发语言·数据结构
道剑剑非道2 小时前
QT 打包安装程序【windeployqt.exe】报错c000007d原因:Conda巨坑
开发语言·qt·conda
小邓儿◑.◑3 小时前
C++武功秘籍 | 入门知识点
开发语言·c++
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
码银5 小时前
Java 集合:泛型、Set 集合及其实现类详解
java·开发语言