restful风格数据交互 前端封装
restful 是目前最流行的 API 设计规范，用于 Web 数据接口的设计，核心思想就是，客户端发出的数据操作指令都是"动词 + 宾语"的结构。
交互方式主要有以下几种：
get请求：用于查询后台数据库数据；
post请求：用于向后台数据库新增数据；
put请求：用于修改后台数据库数据；
delete请求：用于删除后台数据库数据；
项目基于统一管理原则制定了以下请求封装供参考：
1.安装axios
npm i axios -S2.新建文件，封装请求
import axios from 'axios';
/**
* @method restful请求封装
* @param api
* @param {string} api.url 后台地址
* @param {string} api.type 请求方式 get post put delete
* @param {boolean} api.placeholder 是否启用占位符替换 true启用 false不启用 启用后会自动匹配url上的占位符与入参进行替换
* @param {boolean} api.formData 是否启用formData数据格式如参 true启用 false不启用 启用后会自动将入参格式转为formData格式，仅在post请求有效
* @param {object}request 请求参数 默认为空对象
*/
server(api, request = {}) {
/**
* 此处可进行请求前的数据处理：未登录，权限校验等
*/
// 替换占位符
if (api.placeholder) {
for (var i in request) {
if (api.url.indexOf(`{${i}}`) != -1) {
api.url = api.url.replace(`{${i}}`, `${request[i]}`);
delete request[i]
}
}
}
// 创建一个promise并返回
return new Promise((resolve, reject) => {
// 设置请求超时定时器-此处我设置的150000毫秒
let timeOut = setTimeout(() => {
console.error('timeout：', '请求超时');
reject('请求超时')
}, 15000)
// get请求
if (api.type == "get") {
// 返回一个axios请求
return axios({
// 传入请求地址
url: api.url,
// 设置请求方式
method: 'get',
// 设置url携带参数
params: {...request},
// 设置请求头
headers: { 'Content-Type': 'application/json;charset=utf-8' },
})
.then(function(response) {
// 请求成功清除定时器
clearTimeout(timeOut);
// 执行resolve
resolve(response.data);
})
.catch(function(error) {
// 执行reject
reject(error);
// 控制台打印错误信息
console.error('error：', error);
});
} else
// post请求
if (api.type == "post") {
// 转换数据格式为formData格式
if (api.formData && api.type == "post") {
const formdata = new FormData();
for (let i in request) {
formdata.append(i, request[i])
}
request = formdata;
}
// 返回一个axios请求
return axios({
// 传入请求地址
url: api.url,
// 设置请求方式
method: 'post',
// 设置body携带参数
data: request,
// 设置请求头
headers: { 'Content-Type': 'application/json;charset=utf-8' },
})
.then(function(response) {
// 请求成功清除定时器
clearTimeout(timeOut);
// 执行resolve
resolve(response.data);
})
.catch(function(error) {
// 执行reject
reject(error);
// 控制台打印错误信息
console.error('error：', error);
});
} else
// put请求
if (api.type == "put") {
// 返回一个axios请求
return axios({
// 传入请求地址
url: api.url,
// 设置请求方式
method: 'put',
// 设置body携带参数
params: {},
// 设置body携带参数
data: request,
// 设置请求头
headers: {'Content-Type': 'application/json;charset=utf-8'},
})
.then(function(response) {
// 请求成功清除定时器
clearTimeout(timeOut);
// 执行resolve
resolve(response.data);
})
.catch(function(error) {
// 执行reject
reject(error);
// 控制台打印错误信息
console.error('error：', error);
});
} else
// delete请求
if (api.type === "delete") {
// 返回一个axios请求
return axios({
// 传入请求地址
url: api.url,
// 设置请求方式
method: 'delete',
// 设置url携带参数
params: {...request},
// 设置请求头
headers: { 'Content-Type': 'application/json;charset=utf-8' },
})
.then(function(response) {
// 请求成功清除定时器
clearTimeout(timeOut);
// 执行resolve
resolve(response.data);
})
.catch(function(error) {
// 执行reject
reject(error);
// 控制台打印错误信息
console.error('error：', error);
});
}
})
}
export default server;ps:以上代码为封装的详细解释，比较冗余，可结合项目需要进行删减；
3.优化体验
为优化体验使用体验，可在项目的入口文件将该封装方法挂载全局；
vue：
在src/main.js中引入封装，并添加在vue原型中去：
/**
* 引入server.js
*/
import server from './config/server';
Vue.prototype.server = server;全局添加后，在任何页面组件中均可通过以下方式使用：
this.server({api},{request})react：
在src/index.js中引入封装，并添加在window原型中去：
/**
* 引入server.js
*/
import server from './config/server';
window.prototype.server = server;全局添加后，在任何页面组件中均可通过以下方式使用：
window.server({api},{request})
以上就是个人的开发总结了，欢迎留言指正不足之处与交流！