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>
