Vue项目中如何封装axios(统一管理http请求)

这篇文章主要给大家介绍了关于Vue项目中如何封装axios(统一管理http请求)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值

Posted in Vue.js onMay 02, 2021

1、需求说明

在使用Vue.js框架开发前端项目时,会经常发送ajax请求服务端接口,在开发过程中,需要对axios进一步封装,方便在项目中的使用。

2、Vue项目结构

在本地创建Vue项目,目录结构如下:

 - public  静态资源文件
 - src
 |- assets  静态资源目录
 |- components 公共组件目录
 |- http   axios封装目录
 |- router  路由管理目录
 |- store  状态管理目录
 |- views  视图组件目录
 |- App.vue  根组件
 |- main.js  入口文件
 - package.json  npm配置文件

在Vue项目中创建 http目录 作为axios的管理目录,在 http目录 下两个文件,分别是

  • /http/index.js 封装axios方法的文件
  • /http/api.js 统一管理接口的文件

3、代码示例

/http/api.js文件代码如下:

export default {
    'users_add': '/users/add',
    'users_find': '/users/find',
    'users_update': '/users/update',
    'users_delete': '/users/delete'
}

/http/index.js文件代码如下:

import axios from 'axios'
import api from './api'
 
//创建axios实例对象
let instance = axios.create({
    baseURL: 'http://localhost:3000', //服务器地址
    timeout: 5000 //默认超时时长
})
 
//请求拦截器
instance.interceptors.request.use(config=>{
    //此处编写请求拦截的代码,一般用于弹出加载窗口
    console.log('正在请求……')
    return config
},err=>{
    console.error('请求失败',err)
})
 
//响应拦截器
instance.interceptors.response.use(res=>{
    //此处对响应数据做处理
    console.log('请求成功!')
    return res //该返回对象会传到请求方法的响应对象中
},err=>{
    // 响应错误处理
    console.log('响应失败!',err)
    // return Promise.reject(err);
})
 
//封装axios请求方法,参数为配置对象
//option = {method,url,params} method为请求方法,url为请求接口,params为请求参数
async function http(option = {}) {
    let result = null
    if(option.method === 'get' || option.method === 'delete'){
     //处理get、delete请求
        await instance[option.method](
                api[option.url],
                {params: option.params}
          ).then(res=>{
            result = res.data
        }).catch(err=>{
            result = err
        })
    }else if(option.method === 'post' || option.method === 'put'){
     //处理post、put请求
        await instance[option.method](
                api[option.url],
                option.params
            ).then(res=>{
            result = res.data
        }).catch(err=>{
            result = err
        })
    }
 
    return result
}
 
export default http

在main.js入口文件中引入封装好的 /http/index.js 文件,示例代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from './http'
 
Vue.config.productionTip = false
Vue.prototype.$http = http
 
Vue.use(Elementui)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在App.vue根组件中测试axios请求,示例代码如下:

<template>
  <div>
    <button @click="getDate">发送请求</el-button>
  </div>
</template>
 
<script>
export default {
  methods: {
    getDate(){
      this.$http({
        method: 'get',
        url: 'users_find'
      }).then(res=>{
        console.log(res)
      })
 
    }
  }
}
</script>

这里需要有 http://localhost:3000/users/find 接口,不然请求会失败!

4、效果演示

启动Vue项目,在浏览器中访问Vue项目的地址,我的地址是 http://localhost:8080,点击按钮发送请求,获取的结果如下图所示。

到此,在Vue项目中就完成了简单的axios封装,你也可以根据自己的实际需求对axios进行封装,本文只是提供参考。

Vue.js 相关文章推荐
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
vue使用v-model进行跨组件绑定的基本实现方法
关于vue中如何监听数组变化
vue实现简单数据双向绑定
Apr 28 #Vue.js
vue引入Excel表格插件的方法
Apr 28 #Vue.js
原生JS封装vue Tab切换效果
vue项目两种方式实现竖向表格的思路分析
You might like
PHP 写文本日志实现代码
2010/05/18 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
python pymysql库的常用操作
2020/10/16 Python
python3 kubernetes api的使用示例
2021/01/12 Python
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
检讨书大全
2015/01/27 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
Python闭包的定义和使用方法
2022/04/11 Python
python游戏开发之pygame实现接球小游戏
2022/04/22 Python