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

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

yarn add axios -S

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')

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

# 本地开发环境配置(.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

// 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)
}

// 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
        }
    })
}

<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>

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

  yarn local # 运行项目