最近在做后台管理系统时，用到的是MVC的模式，因此vue和elementUi都是使用的cdn引入的方式来处理的，并配合着jq来进行数据处理的。

在工作中，由于我没有进行组件和函数的封装，导致了大量的重复代码，在遇到统一的问题时，改动量巨大而且极易出现纰漏。因此封装函数和组件，是非常有必要的，也是一个前端程序员提升自我的一种表现。

学会封装函数和组件是一个程序员提升的必经之路

由于我在通过ajax调取接口时，都是用的$.ajax({})的方式来处理的，因此当后端同事要求我在请求时把页面中的cookie也传递过去的时候，此时需要我把所有的接口都要改一遍了。

ajax请求向后端传递cookie的方法

由于我之前并没有遇到过这种需求，而且实际工作也没有用到过cookie，因此直接一脸懵。

百度后查找到的方法有两个：

方法1：设置xhrFields中的withCredentials为true——无效

因此在没有进行ajax请求封装之前，我把所有请求的地方都加上了这个：

然而，发布到线上环境后，发现这样写的代码并没有将页面中的cookie传递给后端。

方法2：通过beforeSend将cookie放到token中传递到后端——成功

首先要先获取页面中的cookie

获取页面中cookie的方法：

1. 通过script的方式引入jquery.cookie.js
<script src="~/Scripts/Common/jquery.cookie.js"></script>
2. 通过var cookie = $.cookie('BomWms');的方式来获取页面中的cookie，注意前面的BomWms是cookie存储的名称
3. 在ajax请求之前的beforeSend将cookie存储到token中传递过去
   

封装ajax请求

在封装ajax请求时，需要跟后端协商好，比如get请求和delete请求的url地址是什么样的。
如果是key-value的形式，则可以统一写在一起，如果不统一，比如get请求是key-value键值对，而delete是url/123的方式，则需要将get和delete分开来写，再比如post和put请求，content-type是否一致等等，还比如后端接口返回的数据结构是否是含有success为true和false的字段等，

因此下面的封装方法并不一定适合所有的情况，还是要根据实际情况来进行改动的。

下面的方法是将get和delete视为一种传参方式，post和put视为一种传参方式

function $ajax(method,//请求方式：分为get/delete/post/put四种方式url,//接口请求的地址，如果是需要使用url/123 的传参方式，则需要直接拼接到路径上，否则需要通过data进行传参beforeSendObj,//如果需要将cookie传递到后端，则可以放在这个对象中xhrFieldsFlag, //是否要设置`xhrFields`中的`withCredentials`为`true`{ //这个是传参，data是对象的形式，后面会有相应的处理，还有个addParams，这个是针对get和delete的请求方式，不进行非空的处理的字段，比如status的字段，后端经常会用0 10 20来表示状态，但是0的时候，如果使用filterparams的函数处理，会把0去除，因此将status单独传递data,addParams},successTrueCB,//函数请求成功后的回调函数completeCB//函数请求完成后的回调函数) {if (method == "post" || method == "put") {params = JSON.stringify(data);//如果是post和put请求，则需要通过json.stringify转成字符串形式的传参} else if (method == "get") {params = filterParams(data);//如果是get请求，则需要看下是否有额外的参数，如果有，则需要拼接到去空值的参数后if (addParams && Object.keys(addParams).length > 0) {for (var key in addParams) {params += `&${key}=` + addParams[key];}}}$.ajax({type: method,url,data: params,contentType: method == "get" || method == "delete" ?"application/x-www-form-urlencoded" :"application/json",//如果是get和delete请求，则与post、put的请求的contenttype方式是不一样的，需要进行判断处理beforeSend: (request) => {//如果需要在request请求头中添加cookie，则需要传递个对象，然后将对象中的属性一一设置到请求头中if (beforeSendObj && Object.keys(beforeSendObj).length) {for (var key in beforeSendObj) {request.setRequestHeader(key, beforeSendObj[key]);}}},xhrFields: {//是否开启xhrFieldswithCredentials: xhrFieldsFlag,},success: (res) => {if (res.success) {successCB(res.data);//请求成功后，将参数返回给页面，在进行相应的处理} else {ELEMENT.Message.error(res.message);//如果接口调通但是出现错误，则需要提示错误信息，这个地方是用的`elementui`中的提示错误的提示方法}},fail: () => {ELEMENT.Message.error("请求失败");},complete: () => {completeCB();//请求完成后，有些loading效果需要消失，或者进行其他额外的处理，为了避免出现请求成功或者失败的情况，最好是放在请求完成函数中会避免多次编写代码},});}
//下面的方法是将get或delete请求中为null或者undefined的字段去掉，否则后端会报错，如果后端已经做了处理，则不需要进行此函数的转化
function filterParams(searchObj) {var obj = JSON.parse(JSON.stringify(searchObj));if (!obj.brandLevel) {delete obj.brandLevel;}let str = "";let arr = Object.keys(obj);for (let key in obj) {if (obj[key] != "" && obj[key] != null) {str += key + "=" + obj[key] + "&";}}str = str.substr(0, str.length - 1);return str;
}

cdn引入的elementUi——如何使用message.error()的方法

由于我是mvc的模式，则在使用ajax函数封装时，还是使用用到elementui的提示信息，而非window.alert()的提示信息。一个是为了美观，一个是为了跟页面格式保持统一。

在js文件中如何使用elementUI中的方法：

我们先来看下elementUI中的js的源码：

elementUI中的js的线上地址：https://unpkg.com/element-ui@2.15.6/lib/index.js

我也没有看过源码，但是打开这个线上地址，看到满屏的vue的时候，就一定要清楚：elementUI是跟vue一起使用的，而且引入elementUI一定要是在vue引入之后才可以。
而且看下红框中我圈住的内容，有个ELEMENT，这个其实就是element的集合，所有使用的组件方法都可以直接通过ELEMENT去调用：

下面汇总一下使用方法：

1.首先要引入vue.js

<script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>

2.引入elementUI的css和js文件

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3.需要在body闭合标签之前引入封装好的函数文件才可以生效，也就是为了能够在所有的标签渲染完成后再使用。这个要注意：

4.通过cdn引入的elementUI，在使用message.error等方法时，需要用到下面的方式：

ELEMENT.Message.error('错误');
其他方法同理！

完成！！！