vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue  Axios请求封装

Vue 中的Axios请求封装(修改版)

作者：勇宝趣学前端

本文详细介绍了在Vue项目中对axios进行简单封装的过程,包括安装axios、封装请求基文件、创建api文件夹、引入请求api并使用等步骤,通过封装,可以统一处理请求,感兴趣的朋友跟随小编一起看看吧

在使用 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对象。

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

二、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. 根目录下配置不同环境所需接口基址

属性名必须以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请求简单的封装，让我对模块化有了一个新的认识，最有我想说的是，有的时候踏下心来做成一件事情真的很开心，事情可大可小，但完成的过程真的是发自内心的高兴。有些人说自己一定要做大事才能定义一个人的成功，但是每一次付出的小事不正是我们向成功靠近的基石吗。

到此这篇关于Vue 之 Axios请求封装（修改版）的文章就介绍到这了,更多相关Vue Axios请求封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文