vue3 axios封装 ElementUI Plus

简介: vue add axios 的形式安装 axios常规的安装在vue3里面 封装也比较简单,

1.前言


vue add axios 的形式安装 axios

常规的安装在vue3里面 封装也比较简单,


2.  统一封装  请求拦截  响应拦截


路径/src/utils/http.js


import axios from 'axios';
// import qs from 'qs'
import store from '@/store/index'       //已经设置路径别名,否则相对路径引用
import { ElMessage, ElLoading } from "element-plus";
let loading = null
const service = axios.create({
    timeout: 5000,                                   //超时时间
    baseURL: "http://yzs.xx.com",             // 我们在请求接口的时候就不用写前面 会自动我们补全
    // transformRequest: data => qs.stringify(data)    //post请求参数处理,防止post请求跨域
})
// http request 拦截器
service.interceptors.request.use(config => {
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    //如果存在jwt,则将jwt添加到每次请求之中..
    if (store.state.jwt) {
        config.params = {
            ...config.params,
            jwt: store.state.jwt
        }
    }
    return config
}, err => {
    return err
})
// http response 拦截器
service.interceptors.response.use(response => {
    loading.close()
    return response
    //接收返回数据..
    // const res = response.data
    //判断返回数据是否存在状态code和错误提示信息..
    // if (!res.code || !res.msg) {
    //     return showMessage('响应数据格式错误', "error")
    // }
    //判断状态code是否为指定数值(200)..
    // if (res.code != 200) {
    //     return showMessage(res.msg)
    // }
    // return res
}, err => {
    console.log("33333333333333333")
    loading.close()
    return showMessage(err.message)
})
//封装错误提示信息..
function showMessage(message, type = "error", showClose = true) {
    ElMessage({
        showClose,          //是否显示X
        message,         //错误提示信息
        type,        //显示类型
        duration: 3 * 1000    //展示时间
    })
    return Promise.reject()
}
export default service;

具体的逻辑  一定要根据自己的业务来自己实现


3. api封装


/src/api/loginHttp.js


import http from '@/util/http.js'
export const getLogin = (parmas) => {
    return http
        .post("/login/info", parmas)
}



4. 组件使用



import  * as api from "@/api/loginHttp.js";
let name = ref();
let psw = ref();
let login = async () => {
  let a = {
    phone: name.value, //1860xxxxx753,
    password: psw.value, //"0987654",
  };
  // try {
    let res = await api.getLogin(a);
    if (res.data.code == 200) {
      ElMessage({
        message: "成功",
        type: "success",
      });
    } else {
    }
  // } catch (error) {
  //   console.log("-----error:", error);
  // }
};

1.具名导入

2.单值响应式 value

3.try catch 看情况使用




相关文章
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
407 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
4月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
163 1
|
缓存 JavaScript 搜索推荐
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
1691 4
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
1738 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
580 1
|
前端开发 JavaScript API
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
509 0