基于axios和element-ui封装的request请求插件

请求loading可配置，请求异常可默认提示

本示例仅供参考！！使用的过程中可能需要根据需求做调整！！

request.js

import axios from 'axios'
import {
    Message,
    Loading
} from 'element-ui'
import {
    getToken
} from './auth'

export const setting = {
    baseUrl: 'http://xxx.xx.xxx.xxx:8090/'
}

// 创建axios实例
const service = axios.create({
    baseURL: setting.baseUrl,
    timeout: 240000 // request timeout
})

// 请求拦截器，用于生产配置，记录日志等等
service.interceptors.request.use(config => {
    config.headers = Object.assign({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
        'Authorization': getToken() || '' // 请求头中注入token，如果不需要可以删除
    }, config.headers)
    
	// axios的get和post请求传参方式不一样，所以这里需要适配
    const paramName = config.method.toLocaleLowerCase() === 'get' ? 'params' : 'data'
    config[paramName] = config.data

	// 这种数据格式需要转换一下才能正确传输
    if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=utf-8') {
        config.transformRequest = [function(data) {
            let ret = ''
			
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
			
            return ret.substring(0, ret.length - 1)
        }]
    }

    if (config.showLoading) {
        showFullScreenLoading()
    }

    return config
}, error => {
    Promise.reject(error)
})

// 响应拦截器，用于用户交互，记录日志等等
service.interceptors.response.use(
    response => {
        if (response.config.showLoading) {
            tryHideFullScreenLoading()
        }

        if (response.status === 200) {
            response.data.success = response.data.result === '1' 
            return response.data
        } else {
            showErrorMessage()

            return Promise.reject(response)
        }
    },
    error => {
        tryHideFullScreenLoading()
        showErrorMessage()

        return Promise.reject(error)
    }
)

let loading
function startLoading() {
    loading = Loading.service({
        lock: true,
        text: '加载中',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}

function endLoading() {
    loading.close()
}

function showErrorMessage(message = '请求异常,请重试') {
    Message({
        message,
        type: 'error',
        duration: 5 * 1000
    })
}

let needLoadingRequestCount = 0
export function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        startLoading()
    }

    needLoadingRequestCount++
}

export function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0) return

    needLoadingRequestCount--

    if (needLoadingRequestCount === 0) {
        endLoading()
    }
}

export default service

auth.js

// 安装及使用教程https://www.npmjs.com/package/js-cookie
import Cookies from 'js-cookie'

const TokenKey = 'xxx-Token'
const UserInfoKey = 'xxx-User-Info'

export function getToken() {
  return Cookies.get(TokenKey)
}

// 在登陆后调用将token存储起来
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

export function getUserInfo() {
  return Cookies.get(UserInfoKey)
}

export function setUserInfo(userInfo) {
  return Cookies.set(UserInfoKey, userInfo)
}

export function removeUserInfo() {
  return Cookies.remove(UserInfoKey)
}

使用：在api.js中统一定义请求

api.js

import request from '@/utils/request'

// get请求
export function getXxData(params) {
    return request({
        url: '/xx/xxxx/getData.do', // 请求路径，会自动拼接上baseUrl
        method: 'get',
        data: params,
        showLoading: true
    })
}

// post请求和get请求用法完全一致
export function submitXxData(params) {
    return request({
        url: '/xx/xxx/submitData.do',
        method: 'post',
        data: params,
        showLoading: true
    })
}

// 自定义请求头
export function uploadFile(params){
    return request({
        url: '/xx/xxx/importExcel.do',
        method:'post',
        headers: { 
            "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryOwZABrTBFT4LPAaB" 
        }, 
        data: params
    })
}

在页面中引入相应的函数并使用

index.vue

<script>
	import {
		getXxData,
		submitXxData
	} from '@/api/index'

	export default {
		data() {
			return {
				pageindex: 1,
				records: 0,
				tableData: []
			}
		},
		
		mounted() {
			this.getData()
		},

		methods: {
			getData() {
				// 这里仅仅只是一个示例，具体的参数，请求返回值可以根据需要做相应调整
				getCheckInData({
					username: 'aaa',
					userid: 'xxx'
				})
				.then(({
					rows,
					records,
					pageindex
				}) => {
					this.tableData = rows
					this.pageindex = pageindex
					this.records = records
				})
			}
		}
	}
</script>