vue封装axios和网络请求

封装axios

创建request文件夹，在文件夹下创建request.js文件
request.js：

	// 引入axios
	import axios from 'axios'
	// 引入qs
	import qs from 'qs'
	
	// 调用create方法创建实例
	const instance = axios.create({
	  timeout: 5000
	})
	// 请求前拦截
	instance.interceptors.request.use(config => {
		// 获取token
		const token = localStorage.getItem('token')
		// 判断请求方式
		if (config.method === "post" || config.method === "put") {
	        if (token) {
	            config.data.token = token
	        }
	        //allowDots: true 可以在传输参数时使用点语法 
	        //arrayFormat: 'repeat' 传输数组类型参数时的类型不使用[]
	        config.data = qs.stringify(config.data, { allowDots: true, arrayFormat: 'repeat' })
	    } if (config.method === "get" || config.method === "delete") {
	        if (token) {
	            config.params.token = token
	        }
	        // qs.stringify()将对象 序列化成URL的形式，以&进行拼接
	        config.url = config.url + '?' + qs.stringify(config.params, { arrayFormat: 'repeat' })
	        delete config.params
	    }
	    return config
	}, err => {
	  	return Promise.reject(err)
	})
	
	//返回结果拦截
	instance.interceptors.response.use((res) => {
	    return res.data
	}, (err) => {
	    return Promise.reject(err)
	})
	
	// 导出
	export default instance

封装api

在request.js文件同目录下创建api.js
api.js：

// 导入request文件
import request from './request';

//判断运行环境,如果是开发环境加上 'api' ,不是则为空
const preUrl = process.env.NODE_ENV === 'development' ? 'api' : ''

// 导出请求 post
export const LoginApi = (data) => request.post(preUrl + '/tokens', data)
// 导出get请求
export const getDepartments = (data) => request.get(preUrl + '/departments', { params: data })
// 导出put请求
export const putDepartments = (data) => request.put(preUrl + '/departments/' + data.id, data)
// 导出delete请求
export const deleteDepartments = (id, data) => request.delete(preUrl + '/departments/' + id, { params: data })

封装代理请求

在项目文件夹下创建vue.config.js文件(固定名字不能修改)
注：vue.config.js文件被修改之后要重启项目才能生效
vue.config.js：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: "http://192.168.113.117:8080",
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}