1.概述
在前后端分离的前端开发中，不能绕开的是AJAX的调用，在jpaas-common-lib 组件库中封装了ajax的使用，这个控件封装了请求前置拦截器和后置拦截器，统一对请求和响应做了封装，封装了AJAX的调用方法。
2.封装介绍
2.1 请求时构建token数据、
$ajax.interceptors.request.use(config => {
if (config.headers && config.headers['blob'] == 'true') {
return config;
}
/**
* 传入参数不需要token。
*/
if(config.headers && !config.headers.needToken_){
return config;
}
var token="";
var tmp=localStorage.getItem("pro__Access-Token");
if(tmp){
token=JSON.parse(tmp).value;
}
if (token) {
config.headers['Authorization'] = 'Bearer ' + token ;
}
return config
}, err);在发起请求时进行了拦截，构建token数据发送到后端。
2.2 对响应进行封装
$ajax.interceptors.response.use((response) => {
if (response && response.headers && response.headers['blob'] == 'true') {
return response;
}
if (response && response.data && response.data.message) {
if (response.data.show) {
if (response.data.success) {
message.success({
content: response.data.message
})
} else {
MessageBox.show(response.data);
}
}
}
return response.data
}, err);对响应进行封装，这里要求后端的返回统一的数据格式，显示操作信息。
这里可以参考后端返回：
@Accessors(chain = true)
@Data
public class JsonResult<T extends Object> implements Serializable {
/**
* 返回的成功状态=200
*/
public final static int SUCESS_CODE=200;
/**
* 返回的失败状态=500
*/
public final static int FAIL_CODE=500;3. 使用介绍
3.1 安装
npm install jpaas-common-lib
3.2 在项目中使用，比如在jpaas-vue 中使用
在jpaas-vue 中做了一层封装，参考 ajax.js
import {GetAjax} from 'jpaas-common-lib';
var config={timeout:30000};
var rxAjax=GetAjax(config);
export default rxAjax;因为ajax 需要传入 config数据，所以在项目中将 config 进行传入。
3.3 编写API接口
import rxAjax from '@/assets/js/ajax.js';
const FormPcApi = {};
FormPcApi.baseUrl= '/api-form/form/core/formPc';
FormPcApi.exportUrl= FormPcApi.baseUrl + '/export';
FormPcApi.query=function (parameter) {
var url= FormPcApi.baseUrl + '/query';
return rxAjax.postJson(url,parameter).then (res => {
return res.result
})
}
/**
* 获取单记录
* @param pkId
* @returns {*}
*/
FormPcApi.get =function(pkId) {
var url= FormPcApi.baseUrl + '/get?pkId=' + pkId;
return rxAjax.get(url);
}这样做一次封装ajax ，前端使用这些API就好了。
3.4 接口方法介绍
3.4.1 get方法
示例
var url= FormPcApi.baseUrl + '/get?pkId=' + pkId;
rxAjax.get(url).then(res=>{
});方法定义
ajax.get =function(url,params)
输入参数：
- url 这个是数据URL
- params 这个参数为一个JSON格式，这个参数可以没有。
例如
url : “/api-form/form/core/formPc/get”
params :{pkId:”10002”,name:”ray”}
访问路径为：
http://localhost/api/api-form/form/core/formPc/get?pkId=1228950793264762881&name=abc
返回参数
这个方法返回的是一个Promise 对象。
3.4.2 postForm 方法
示例：
var url="/api-form/form/core/formPc/save";
rxAjax.postForm(url,{name:"",address:""}).then(res=>{
console.info(res);
});方法定义
输入参数：
- url 访问数据URL
- params 这个对象有两种形式。
{name:”ray”,address:”guangzhou”} name=ray&address=guangzhou
返回数据
这个方法返回一个Promise。
3.4.3 postUrl 方法
这个方法和postForm 不同的是数据会构建在 URL中。
示例
var params={ ids: "001" }
var url= FormPcApi.baseUrl + '/del';
return rxAjax.postUrl(url,params);方法定义
输入参数：
- url 访问数据URL
- params 这个有两种形式
json对象： {name:”ray”,address:”guangzhou”}
键值对字符串： name=ray&address=guangzhou
返回数据
这个方法返回一个Promise。
3.4.4 put 方法
这个和post方法不同再试 HTTP 方法为put ，其他的是一致的。
3.4.5 upload 方法
示例
let formdata = new FormData();
formdata.append('file',file);
formdata.append("time", timestamp);
var url= "/upload/";
ajax.upload(url,formData,function(e){
//e.loaded 已上传量
//e.total 上传总量
});方法定义
ajax.upload =function(url,params,callback)
参数：
- url 上传路径
- params FormData 对象
- 上传进度回调方法，见示例。
3.5 如何添加自定义头
我们在调用时，默认添加了token,有些情况下，如果用户需要自己添加请求头。
每一个方法都有config 对象，我们可以在调用的时候传递。
ajax.get = function (url, params,config)
ajax.postForm = function (url, params,config)
ajax.download = function (url, params, config)
ajax.postJson = function (url, params,config)
ajax.postUrl = function (url, params,config)
ajax.postTimeout = function (url, params, config)
ajax.putJson = function (url, params,config)
ajax.putForm = function (url, params,config)
ajax.deleteJson = function (url, params,config)
ajax.deleteForm = function (url, params,config)
ajax.upload = function (url, params, callback,config)如果需要传递自定义请求头，可以这样做：
config.headers={token1:'2222'};
这样就看可以传递一个叫token1 的请求头。
