首页 > 其他分享> > Vue 之 Axios请求封装（修改版）

Vue 之 Axios请求封装（修改版）

2021-09-30 14:06:40 作者：互联网

在使用 Vue 开发我们的项目时，势必要使用到router，可能也会使用到vuex，但是我们肯定会使用到axios，对于初学者来说我们基本都是拿过来使用的，直接在main.js中进行导入即可。但是在真正做项目的时候，我们都是需要对axios进行请求封装的，比如我们请求需要携带token，或者我们有多个环境：如测试环境、开发环境等…
这里主要记录一下axios的简单封装。

一、准备阶段

初始化项目

⭐ 安装 Vue 这里就不开展说了,我们重创建一个Vue项目开始。

Vue create my-project

cd my-project # 进入项目目录
yarn # 安装依赖，也可以使用 npm install
yarn serve # 启动项目

安装 axios

⭐项目创建完成后，我们开始安装axios。

yarn add axios -S

-D： --save-dev 的简写，模块写入到devDependencies对象。

devDependencies对象，是我们开发的时候需要用到的一些包，只用于开发阶段，真正打包上线的时候并不需要这些包，因为这些工具只是你用来打包代码的。

-S： --save 的简写，模块写入到dependencies对象。

需要发布到生产环境中的，就比如你要跑一个基于vue的项目，所以需要vue.js来支持，vue.js 文件就需要跟随项目到最终的生产环境。

二、axios 引入

简单引入

⭐ 如上所说，我们安装完axios可以直接进行使用。

在 main.js 中导入 axios

import axios from 'axios'
// 全局挂载
Vue.prototype.$axios = axios
// 设置默认路由前缀
axios.defaults.baseURL = 'http://localhost:8080'
new Vue({
    axios,
    router,
    store,
    render: h => h(app)
}).$mount('#app')

在.vue文件中使用

<script>
    methods:{
        Login () {
            this.$axios({
                url:'/login',
                method: 'post',
                data:{
                    userName:'xxxx',
                    password:'xxxx'
                }
            }).then((res)=>{
                console.log(res)
            })
        }
    }
</script>

三、封装 axios 请求

⭐ 我们不在main.js中进行引入。

1. 根目录下配置不同环境所需接口基址

.env 全局默认配置文件，不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
.env.local 本地开发环境配置

命名规则：

属性名必须以VUE_APP_开头，比如VUE_APP_XXX

# 本地开发环境配置(.env.local)
NODE_ENV=development

# base url
VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
VUE_APP_FORM_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
VUE_APP_SIGN_OFF_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
VUE_APP_LOGIN_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
VUE_APP_SSO_BASE_URL=http://xx.xx.xx.xxx:8080/xxx

// 測試服client-id
# VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
// 本地client-id
VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
VUE_APP_FILE_SERVER_BASE_URL=http://xx.xx.xx.xxx:8080/xxx

2. 封装请求基文件

⭐ 在 src 目录下创建src/tools/http/request.js

// src/tools/http/request.js
import axios from 'axios'
import { Message} from 'element-ui' // 引入 Element 组件

export default function request ({ type='COMMOn',data }){
    let baseUrl = process.env.VUE_APP_API_BASE_URL // 这是配置的 .env 文件
    switch (type) {
            case 'COMMON':
            baseUrl = process.env.VUE_APP_API_BASE_URL
            break;
            case 'LOGIN':
            baseUrl = process.env.VUE_APP_LOGIN_BASE_URL
            break;
            case 'FROM':
            baseUrl = process.env.VUE_APP_FORM_BASE_URL
      	    break;
        default:
            break;
    }
    console.log('baseUrl', process.env)
    const service = axios.create({
        baseURL: baseUrl,
        timeout: 5000
    })
    // 请求拦截器
    service.interceptors.request.use(config => {
        //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
        config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
        config.headers = {
            'Content-Type':'application/x-www-form-urlencoded' //配置请求头
        }
        //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
        if(token){
            config.params = {'token':token} //如果要求携带在参数中
            config.headers.token= token; //如果要求携带在请求头中
        }
        return config
    }, error => {
        Promise.reject(error)
    })
    
    // 响应拦截器
    service.interceptors.response.use(response => {
        return response
    }, error => {
        Message.error(error.message)
        return Promise.resolve(error.response)
    }
    return service(data)
}

四、请求数据

1. 创建`api`文件夹

⭐ 在src目录下创建api文件夹，放置每个请求模块的方法，以后所有的请求写在这个文件夹下边，比如我们系统有一个角色配置模块。

创建src/api/role-config.js

// src/api/role-config.js
import request from '@/tools/http/request'

// 获取角色列表的 api
export function getRoleListsApi (data) {  // 接口需要的 data 数据
    return request ({
        data:{
            url:'/roleList',
            method:'post',
            data
        }
    })
}

3. 引入请求 api

Role.vue组件进行请求数据

<script>
    import { getRoleListsApi } from '@/api/role-config.js'
    export default {
        name: 'Role',
        data (){
            return {
                roleList: [] // 存储需要渲染的数据
            }
        },
        methods:{
            // 获取角色列表
            async getRoleList () {
                const obj = { roleid:'普通会员' }
                const { roleList, code } = await getRoleListsApi(obj)
                if(code === 200){
                    this.roleList = roleList
                }
            }
        }
    }
</script>

五、启动项目

⭐ 在开发环境下启动项目

1. 配置 package.json


  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "local": "vue-cli-service build --mode local", // 新加的
  },

2. 打开命令行

  yarn local # 运行项目

总结

拖了有三天了，今天终于把这一块梳理清楚了，我承认自己懒了，这几天工作上相对比较忙，可能国庆回来会好一点吧！今天通过对axios请求简单的封装，让我对模块化有了一个新的认识，最有我想说的是，有的时候踏下心来做成一件事情真的很开心，事情可大可小，但完成的过程真的是发自内心的高兴。有些人说自己一定要做大事才能定义一个人的成功，但是每一次付出的小事不正是我们向成功靠近的基石吗。

标签：axios,VUE,APP,xxx,xx,Vue,修改版,Axios,env
来源： https://blog.csdn.net/weixin_44013288/article/details/120565470