Vue项目中封装axios 统一管理http请求

超、凢脫俗 2023-01-15 04:56 135阅读 0赞

## 1、需求说明 ##

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

## 2、Vue项目结构 ##

在本地创建Vue项目，目录结构如下：

在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，点击按钮发送请求，获取的结果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70]  
到此，在Vue项目中就完成了简单的axios封装，你也可以根据自己的实际需求对axios进行封装，本文只是提供参考。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3A0NDUwOTgzNTU_size_16_color_FFFFFF_t_70]: /images/20221022/7907da9f5d664f3f9f80abf71002bdf6.png