# Ajax

该类型是在axios的基础上进行了封装,对后台返回的数据进行预处理,以简化数据访问操作。 在调用接口时,会自动调用layer.showLoadin)和layer.hideLoading方法。 该类共定义了5个方法,所有方法均返回一个Promise对象。

# 基础

# 使用

import {Ajax} from 'sjfx';

# 属性

属性名 类型 说明
header Object 该对象下的所有数据均会添加到Ajax请求头中。主要用于发送token
pageMode String 请求分页数据时,发送到后台的参数。当前支持limit(limit,offset)、page(page,pageSize)两种模式
onlyData Boolean 在自动处理模式下,是否仅返回data,以避免多余嵌套。默认为false。可在main.js中设置该值为true
OriginalData Json 接口返回的原始数据。用于在自动处理模式下需要访问原json的场景。仅保留最后一次的Ajax请求结果,所以在多个请求时无法正常使用。目前暂无应用场景

# 方法

方法名 说明 参数
get 使用get方式提交数据,并获取json数据 url, params, autoFilter
post 使用post方式提交form数据,并获取json数据 url, params, autoFilter
postJson 使用get方式提交json数据,并获取json数据 url, params, autoFilter
getText 使用get方式提交,并获取非json数据 url, params
getPage 使用get方式提交数据,并获取分页json数据 url, page, opt

# 成功返回示例(Json ):

{
  success : true ,
  total : 2 ,
  msg : '成功' ,
  data : [{
    id : 1 ,
    name  : "张三"
  },{
    id : 2 ,
    name  : "李四"
  }]
}

# 失败返回示例(Json ):

{
  success : false ,
  msg : '数据已在使用中'
}

# get、post、postJson

这三个方法有相同的参数,且默认对结果进行预处理

参数 说明 数据类型
url 接口地址 String
params 提交到后台的数据 Object,get方法可不传该参数
autoFilter 是否预处理 Boolean,默认为true

# 预处理

仅当后台接口返回数据,状态值为200或304时,进行下一步,否则报错 仅当后台接口返回数据为json类型时,进行下一步,否则报错 当json数据的success为false时,弹出错误提示,并显示后台返回的的msg或者errMsg

# Demo

# 请求结果

{
	"success":true,
	"point":123
}

# 代码

import {Ajax} from 'sjfx';

Ajax.get('/User/Point').then( res =>{
	//res = {point:123}
})
Ajax.get('/User/Point',{},false).then( res =>{
	//res = {data:{point:123}}}
})

# getPage

参数 说明 数据类型
url 接口地址 String
page 页码 Number
opt 其他参数 Object

# opt参数说明

paras:Object,可选,传递给后台接口的参数
limit: Number,可选,每页数据条数,默认为10
onEnd(isFirst):Function,可选,没有更多数据时触发。
	isFirst是一个bool值,表示当前是否为第一页
filter: Function,可选,对接口数据进行转换(如果后台返回的json数据不是data和total)

# Demo

import {Ajax} from 'sjfx';

Ajax.getPage('/User/List',1,{
	limit:10
}).then( res =>{	
	// res:同get方式
})

# getText

参数 说明 数据类型
url 接口地址 String
params 提交到后台的数据 Object,get方法可不传该参数

# Demo

# 请求结果

<p>Hello World!</p>

# 代码

import {Ajax} from 'sjfx';

Ajax.getText('/User/UserSign').then( res =>{
	//res = '<p>Hello World!</p>'
})

# AjaxPro

该类是Ajax的高级化运用,与Ajax实例相比有以下几点不同: 1.不自动处理错误 2.可自定义是否显示加载动画 3.它是一个类,使用方式与Ajax不同(Ajax是类的实例) 4.由于需要实例化才可以使用AjaxPro,所以每个AjaxPro都是独立的实例,互不影响 5.AjaxPro的实例不支持并发请求,必须完成一个请求才能进行下一次请求

# 签名

实例化类的时候,必须传入一个对象,该对象可以包含以下参数: url:接口地址,必传,且接口地址应该是 data:提交到接口的参数。这部分参数应该是固定的、不变化的 sendType:提交方式,支持get、post、postJson,默认为get resultType:获取的数据类型,支持json、text、blob,默认为json loading:是否显示加载动画,默认为true

# 属性

url:接口地址,必传 data:提交到接口的参数。这部分参数应该是固定的、不变化的 sendType:提交方式,支持get、post、postJson,默认为get resultType:获取的数据类型,支持json、text、blob,默认为json loading:当前加载状态,View可根据loading来控制按钮的文字和可点击状态 useLoading:是否显示加载动画,默认为true

# 方法

submit(data,url) url:接口地址。由于签名中已经定义了url,所以调用submit时,该参数非必传 paras:需要提交到接口的数据

注意:属性中的loading与传入参数的loading不同

# 实例

  import AjaxPro from '../../../math/ajax_pro.js'
//get  
  let ajax = new AjaxPro({
  	url: 'http://192.168.1.23:8000/account/api/v1/user?accountType=point'
  });
  ajax.submit().then((data) => {
	  console.log(data, ajax.result);
  });
  
//post  
  ajax = new AjaxPro({
	  url: 'http://192.168.1.23:8000/account/api/v1/user',
	  sendType: 'post'
  });
  ajax.submit({
 	 name: 'hello'
  }).then((data) => {
	  console.log(data, ajax.result);
  });
//post json  
  ajax = new AjaxPro({
	  url: 'http://192.168.1.23:8000/account/api/v1/user',
	  sendType: 'postJson'
  });
  
  ajax.submit({
 	 name: 'hello'
  }).then((data) => {
	  console.log(data, ajax.result);
  });
Last Updated: 1/14/2020, 3:34:31 PM