axios 使用

1.官网-安装

http://www.axios-js.com/zh-cn/docs/

复制代码
npm install axios

2.统一封装类,新建src/http/index.ts

TypeScript 复制代码
import axios from 'axios'
import { ElLoading } from 'element-plus'
import { ElMessage } from 'element-plus'
interface IResponseData<T> {
    code: number,
    message: string,
    data: T
}
let loading:any;
class Http {
    myAxios: any;
    constructor(config: any) {
        this.myAxios = axios.create(config);
        // 添加请求拦截器
        this.myAxios.interceptors.request.use(function (config:any) {
            //显示loading层
             loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
              })
            
            return config;
        }, function (error:any) {
           // 对请求错误做些什么
           loading.close();
            return Promise.reject(error);
        });
        // 添加响应拦截器
        this.myAxios.interceptors.response.use(function (response:any) { 
            //关闭loading层
            loading.close();
            const {code,msg,data} = response.data

           if(code === 0){
             return data;
           } else if (code == undefined){
            return response;
           } else if(code != 0){
             ElMessage.error(msg)
             return Promise.reject(msg);
           }

            
        }, function (error:any) {
            // 对响应错误做点什么  
            loading.close();       
            return Promise.reject(error);
        });
    }
    get<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
        return this.myAxios.get(url, { params, ...data });
    }

    post<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
        return this.myAxios.post(url, params, data);
    }

    put<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
        return this.myAxios.put(url, params, data);
    }

    delete<T>(url: string, params?: object, data = {}): Promise<IResponseData<T>> {
        return this.myAxios.delete(url, { params, ...data });
    }

}
const config = {
    baseURL: '',
    timeout: 30 * 1000,
    withCredentials: true,
}

export default new Http(config);
 

3..Proxy配置

在vite.config.ts 文件中

TypeScript 复制代码
server: {

    port: 5000, // 你需要定义的端口号

    proxy: {
      "/api": {
        target: "Api地址",
        changeOrigin: true,
      
      },
    
    },
 },

4.使用方式

TypeScript 复制代码
import http from "@/http/index";

onMounted(()=>{

 http.get(
        "/api/products"
      )
      .then((res: any) => {

        tableData.value = res.data;

      })
      .catch((err: any) => {
        console.log(err);
      });

})
相关推荐
EMT18 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安26 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多1 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户516816614584117 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦17 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He18 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js