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)
输入参数:

  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. 上传进度回调方法,见示例。

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 的请求头。

文档更新时间: 2022-03-27 16:10   作者:zyg