restful风格数据交互前端封装

restful 是目前最流行的 API 设计规范，用于 Web 数据接口的设计，核心思想就是，客户端发出的数据操作指令都是"动词 + 宾语"的结构。

交互方式主要有以下几种：

get请求：用于查询后台数据库数据；

post请求：用于向后台数据库新增数据；

put请求：用于修改后台数据库数据；

delete请求：用于删除后台数据库数据；

项目基于统一管理原则制定了以下请求封装供参考：

1.安装axios

npm i axios -S

2.新建文件，封装请求

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请求
            let DATA = {};
            if (!api.placeholder) {
                for (var i in request) {
                    api.url = api.url + '/' + request[i]
                }
            } else {
                DATA = request;
            }
            return axios({
                // 传入请求地址
                url: api.url,
                // 设置请求方式
                method: 'delete',
                // 设置url携带参数
                params: {...DATA},
                // 设置请求头
                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;