axios 使用

1.官网-安装

axios中文网|axios API 中文文档

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

www.axios-js.com

复制代码
npm install axios

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

javascript 复制代码
import axios from 'axios'
import { ElLoading,ElMessage  } from 'element-plus'


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<any> {
        return this.myAxios.get(url, { params, ...data });
    }

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

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

    delete<T>(url: string, params?: object, data = {}): Promise<any> {
        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 文件中

javascript 复制代码
  server: {

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

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

4.使用方式

javascript 复制代码
import http from "@/http/index";
onMounted(()=>{

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

        tableData.value = res.data;

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

})
相关推荐
The Future is mine14 分钟前
Python计算经纬度两点之间距离
开发语言·python
Enti7c15 分钟前
HTML5和CSS3的一些特性
开发语言·css3
爱吃巧克力的程序媛23 分钟前
在 Qt 创建项目时,Qt Quick Application (Compat) 和 Qt Quick Application
开发语言·qt
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
独好紫罗兰1 小时前
洛谷题单3-P5719 【深基4.例3】分类平均-python-流程图重构
开发语言·python·算法
前端Hardy1 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html