一、前言
本片文章主要记录一下基于axios封装的请求。
二、开始喽
2.1 引入axios
npm install axios --save
2.2 创建api.js文件
先在src根目录下创建一个utils文件夹,再在utils文件夹里面新建一个api.js文件(如果想叫别的名字也可以用别的名字)
2.3 将下面的代码粘进去
import axios from 'axios'
let base = 'http://127.0.0.1:8082';
export const getRequest = (url,params) => {
return axios({
method: 'get',
data: params,
transformRequest: [function (data) {
/*let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret*/
let ret = JSON.stringify(data);
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
url: `${base}${url}`
});
}
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = JSON.stringify(data);
//console.log(ret);
return ret
}],
headers: {
/*'Content-Type': 'application/x-www-form-urlencoded'*/
'Content-Type': 'application/json'
}
});
}
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params,
transformRequest: [function (data) {
let ret = JSON.stringify(data);
return ret
}],
headers: {
'Content-Type': 'application/json'
}
});
}
export const deleteRequest = (url, params) => {
return axios({
method: 'delete',
data: params,
url: `${base}${url}`
});
}
2.4使用
<script>
//先引入
import {getRequest,deleteRequest,postRequest,putRequest} from "../utils/api";
//~~省略部分代码,直接展示调用部分~~
postRequest("/api/train-module-message/save", this.trainModuleMessage)
.then(rsp => {
console.log(rsp);
})
putRequest("/api/train-module-message/update", this.trainModuleMessage)
.then(rsp => {
console.log(rsp);
})
getRequest("/api/train-module-message/getOne/" + this.currentTrainModuleMessageId)
.then(rsp => {
console.log(rsp.data);
})
deleteRequest("/api/train-module-message/delete/"+row.trainModuleMessageId)
.then(rsp => {
console.log(rsp.data);
})
</script>