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

 更新时间:2021年05月02日 09:03:53   作者:柯晓楠  
这篇文章主要给大家介绍了关于Vue项目中如何封装axios(统一管理http请求)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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项目中如何封装axios(统一管理http请求)的文章就介绍到这了,更多相关Vue封装axios管理http请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解用vue编写弹出框组件

    详解用vue编写弹出框组件

    本篇文章主要介绍了详解用vue编写弹出框组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 浅谈Vue.js应用的四种AJAX请求数据模式

    浅谈Vue.js应用的四种AJAX请求数据模式

    本篇文章主要介绍了浅谈Vue.js应用的四种AJAX请求数据模式,本文将详细介绍在Vue应用程序中实现AJAX的四个方法,有兴趣的可以了解一下
    2017-08-08
  • vue登录以及权限验证相关的实现

    vue登录以及权限验证相关的实现

    这篇文章主要介绍了vue登录以及权限验证相关的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue中将html字符串转换成html后遇到的问题小结

    vue中将html字符串转换成html后遇到的问题小结

    这篇文章主要介绍了vue中将html字符串转换成html后遇到的问题小结,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue实现的双向数据绑定操作示例

    vue实现的双向数据绑定操作示例

    这篇文章主要介绍了vue实现的双向数据绑定操作,结合完整实例形式较为详细的分析了vue.js进行数据双向绑定操作的常见实现方法与相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • 前端Vue项目详解--初始化及导航栏

    前端Vue项目详解--初始化及导航栏

    这篇文章主要介绍了前端Vue项目详解--初始化及导航栏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    这篇文章主要介绍了快速解决Vue、element-ui的resetFields()方法重置表单无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 用vue封装插件并发布到npm的方法步骤

    用vue封装插件并发布到npm的方法步骤

    本篇文章主要介绍了用vue封装插件并发布到npm的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue移动端html5页面根据屏幕适配的四种解决方法

    vue移动端html5页面根据屏幕适配的四种解决方法

    在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有四个方法可以适用。这篇文章主要介绍了vue移动端h5页面根据屏幕适配的四种方案 ,需要的朋友可以参考下
    2018-10-10
  • vue实现form表单与table表格的数据关联功能示例

    vue实现form表单与table表格的数据关联功能示例

    这篇文章主要介绍了vue实现form表单与table表格的数据关联功能,涉及vue.js表单事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-01-01

最新评论