1.概述

在前后端分离的前端开发中,不能绕开的是AJAX的调用,在jpaas-common-lib 组件库中封装了ajax的使用,这个控件封装了请求前置拦截器和后置拦截器,统一对请求和响应做了封装,封装了AJAX的调用方法。

2.封装介绍

2.1 请求时构建token数据、

$ajax.interceptors.request.use(config => {
    const token = Vue.ls.get(ACCESS_TOKEN);
    config.headers['Authorization'] =`Basic ${Base64.encode(`${client.clientId}:${client.clientSecret}`)}` ;
    if (token) {
      //config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
      config.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
    }
    return config
  }, err);

在发起请求时进行了拦截,构建token数据发送到后端。

2.2 对响应进行封装

$ajax.interceptors.response.use((response) => {
    if (response && response.data && response.data.message) {
      if(data.show) {
        notification.success({
          message: '操作提示',
          description: response.data.opMessage
        })
      }
    }
    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';
import website from '@/config/website';
import route from "@/store/modules/route";
var config={clientId:website.clientId,clientSecret:website.clientSecret};
var rxAjax=GetAjax(config,route);
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)
输入参数:

  1. url 这个是数据URL
  2. 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);
});

方法定义

输入参数:

  1. url 访问数据URL
  2. 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);

方法定义

输入参数:

  1. url 访问数据URL
  2. 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)

参数:

  1. url 上传路径
  2. params FormData 对象
  3. 上传进度回调方法,见示例。
文档更新时间: 2021-08-17 09:21   作者:zyg