首页 > 其他分享 >vue3 封装axios

vue3 封装axios

时间:2022-11-22 03:22:16浏览次数:48  
标签:function axios 封装 success url failure params key vue3

1添加一个新的 http.js文件 封装axios

 引入axios 

//引入Axios 
import axios from 'axios'

定义一个根地址

//视你自己的接口地址而定
var root2 = 'http://121.4.63.196:8520/api'

 

定义个小函数来统一参数格式(可写可不写,自己随意)

//参数过滤(去空白)
function filterNull(o) {
    for (var key in o) {
        if (o[key] === null) {
            delete o[key]
        }
        //字符串,对象,数组
        if (typeof (o[key]) === 'string') {
            o[key] = o[key].trim()
        } else if (typeof (o[key] === 'object')) {
            alert(o[key]);
            o[key] = filterNull(o[key])
        } else if (typeof (o[key]) === 'array') {
            o[key] = filterNull(o[key])
        }
    }
    return o
}
参数过滤(去空白)

 

接口处理:重头戏

//接口处理函数
function apiAxios(method, url, params, success) {
    //整理参数
    if (params) {
        params = filterNull(params)
        console.log(params);
    }
    axios({
        method: method,
        url: url,
        data: method === 'post' || method === 'put' ? params : null,
        params: method === 'get' || method === 'delete' ? params : null,
        headers: {
            //'Content-Type':'application/json'
        },
        baseURL: root2,
        withCredentials: false
    }).then(function (res) {
        if (res.State && res.Code) {
        success(res.data)
        }
    }).catch(function (error) {
        let res = error.response
        if (error) {
            console.log('API错误:' + res.State);
        }
    })
}

 

导出给vue组件使用

//返回在vue模板中调用的接口
export default ({
    get: function (url, params, success, failure) {
        return apiAxios('get', url, params, success, failure);
    },
    post: function (url, params, success, failure) {
        return apiAxios('post', url, params, success, failure);
    },
    put: function (url, params, success, failure) {
        return apiAxios('put', url, params, success, failure);
    },
    delete: function (url, params, success, failure) {
        return apiAxios('delete', url, params, success, failure);
    }
})

 

main.js里面如何使用:

//引入接口文件
import api from './api/http.js'

var app=createApp(App)
app.use(routers)
//绑定给全局使用 $api可以随便定义 例如 $http $a $b 随喜好 app.config.globalProperties.$api=api
 app.mount('#app')

 

app.vue里面使用

this.$api.post('/AutoCode/SendEmail163', { 'email': this.email },r=>{      
      this.email2=r.message
     });

 

标签:function,axios,封装,success,url,failure,params,key,vue3
From: https://www.cnblogs.com/zhang-3/p/16913968.html

相关文章

  • Vue3笔记 - minxin和hook的使用与对比
    minxin和hook的使用与对比目录minxin和hook的使用与对比1.mixin(Vue2)2.hook(Vue3)3.mixin和hook的对比1.mixin(Vue2)mixin可以把多个组件共用的配置提取成一......
  • vue3 路由的使用
    添加一个router.js配置文件import{createRouter,createWebHistory}from'vue-router'createRouter:用来创建路由createWebHistory:url的格式不带#。导入你......
  • Vue3笔记 - Vue3中的计算属性、监视属性和watchEffect函数
    计算属性与监视属性目录计算属性与监视属性1.计算属性2.监视属性3.watchEffect函数1.计算属性Vue3中的计算属性仅在书写方式上与Vue2略有不同,功能上基本一致Vue2......
  • vue3的父子通信
    父组件import{students,studentDel}from"@/api/api.js";//eslint-disable-next-lineno-unused-varsimport{ref,reactive,toRefs,onMounted,useContext,c......
  • vue+axios+ssm解决跨域问题
    环境1.vue-admin-template模板2.axios3.后端java跨域问题解决方案注意:配置了前端解决方案后端可以不用配置,反之后端配置了前端可以不用配置前端解决方案前端采用......
  • vue+axios跨域问题
    环境1.vue-admin-template模板2.axios3.后端java跨域问题解决方案前端vue.config.js文件在module.exports中找到devServer完成如下配置devServer:{port:p......
  • axios二次封装-main.js使用
    axios封装:配置代理:axios封装:axios的二次封装:请求拦截统一token处理:引入:使用:导入:响应拦截统一错误处理:导入:main.js:login页面:效果:请求:我们要请求......
  • 登录校验封装以及token封装
    封装校验:用户名匹配:登录校验封装:导入模块:(按需导入)使用封装名称:封装token:设置-获取-删除导入token:使用token:......
  • mybatis查询结果封装javabean属性时属性名与数据库字段不同都能封装????
    问题现象:通过mybatis查询数据库中的表记录,封装成javaBean,本来属性名和字段名不相同的情况下,属性最后应该注入null的,结果能够正常注入。javaBean:publicclassEmplo......
  • Vue3官方出的Playground你都用了吗?没有没关系,直接原理讲给你听
    相比​​Vue2​​​,​​Vue3​​​的官方文档中新增了一个在线​​Playground​​:打开是这样的:相当于让你可以在线编写和运行​​Vue​​​单文件组件,当然这个东西也是开源......