axios很多前端都应该是非常熟悉了，前端访问后端很多都是使用的它，今天我们使用vue来封装一个axios。

首页我们新建一个request.js文件并引入axios的依赖

import axios from 'axios'

接着创建axios的实例

const service = axios.create({
	baseURL: '/api', 
})

然后我们定义一个常量函数，这个函数将接收四个参数：url、value、method和options。其中，url表示请求地址，value表示请求参数，method表示请求方式（默认为post），options表示请求配置（默认为空对象）。该函数的作用是向服务器发起请求，并返回一个Promise对象，该对象可以通过then方法进行后续处理。
在函数内部，首先将请求地址进行拼接，然后根据请求方式的不同，分别调用axios库中的post或get方法。如果请求方式为formdata，通过axios库中的方法进行数据转换和请求头设置，最终返回请求结果。

export const baseRequest = (url, value = {}, method = 'post', options = {}) => {
	url = 'http://127.0.0.1:你的端口' + url
	if (method === 'post') {
		return service.post(url, value, options)
	} else if (method === 'get') {
		return service.get(url, {
			params: value,
			...options
		})
	} else if (method === 'formdata') {
		return service({
			method: 'post',
			url,
			data: value,
			// 转换数据的方法
			transformRequest: [
				function (data) {
					let ret = ''
					for (const it in data) {
						ret += `${encodeURIComponent(it)}=${encodeURIComponent(data[it])}&`
					}
					ret = ret.substring(0, ret.length - 1)
					return ret
				}
			],
			// 设置请求头
			headers: {
				'Content-Type': 'multipart/form-data'
			}
		})
	}
}

到此核心部分代码已经编写完成，整个request.js文件代码如下：

// 统一的请求发送
import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
	baseURL: '/api', 
})

export const baseRequest = (url, value = {}, method = 'post', options = {}) => {
	url = 'http://127.0.0.1:你的端口' + url
	if (method === 'post') {
		return service.post(url, value, options)
	} else if (method === 'get') {
		return service.get(url, {
			params: value,
			...options
		})
	} else if (method === 'formdata') {
		return service({
			method: 'post',
			url,
			data: value,
			// 转换数据的方法
			transformRequest: [
				function (data) {
					let ret = ''
					for (const it in data) {
						ret += `${encodeURIComponent(it)}=${encodeURIComponent(data[it])}&`
					}
					ret = ret.substring(0, ret.length - 1)
					return ret
				}
			],
			// 设置请求头
			headers: {
				'Content-Type': 'multipart/form-data'
			}
		})
	}
}

export default service

代码有了，下来是使用。

在具体的业务中，我们先建立一个该业务的js和vue文件，如：test.js和index.vue。

test.js中定义了一个封装了baseRequest函数的request函数，如下

import { baseRequest } from '@/utils/request' //这里的request.js存放在utils文件夹

const request = (url, ...arg) => baseRequest(`${url}`, ...arg)

export default {
    // 获取数据
    parkData(data) {
        return request('/data', data, 'get')
    },
}

index.vue中进行实际的调用

<script>
import indexApi from "../diz/js/test";

export default {
name:'test',
  components: {
  },
  data(){
    return {
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData(){
      indexApi.parkData(param1).then((data) => {
         //根据后端返回数据进行data的逻辑处理
      })
    }
  }
}
</script>