axios分步式返回数据接口
对比常规请求与分布式请求：
export function doPackage(params) {return axios.post(package_url,params || {} )} // 调用封装函数stepRequset() export function doPackage (params, stepCallback, lastCallback, timeoutCallback) { stepRequest(package_url, params || {}, stepCallback, lastCallback, 3600000, timeoutCallback) }
分布拉取数据封装：需要后台配合使用
// import axios from 'axios'; import axios from './axios.js' function makeUuid () { var s = [] var hexDigits = '0123456789abcdef' for (var i = 0; i < 36; i++) {// 0 到 1 之间的一个随机数*0,然后向下取整四舍五入，ceil(x)是向上舍入 s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1) // substr()字符串截取：('dbzhao').substr(3)，得到："hao"；('dbzhao').substr(1,3)，得到："bzh";-1是指最后一位
}
// bits 12-15 of the time_hi_and_version field to 0010 s[14] = '4' // bits 6-7 of the clock_seq_hi_and_reserved to 01 s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) s[8] = s[13] = s[18] = s[23] = '-' var uuid = s.join('') return uuid } export const getResponseStepList = (uuid, seqid) => axios.post('/response/steplist', { step_track_uuid: uuid, step_next_seqid: seqid }).then(function (response) { return response }) class TimeoutChecker { // es6定义一个class类 constructor (timeoutMs) { this.timeoutMs = timeoutMs || 3600000 this.restart() } restart () { this.startTime = this.getNowMs() } isTimeout () {// 调用时间是否超时，即大于设置的超时时间 return this.getNowMs() - this.startTime > this.timeoutMs } getNowMs () { return new Date().getTime() } } // export const stepRequest = ( url, // 要封装调用接口路径 data, // 封装调用接口请求数据 stepCallback, // 中间步骤response回调,参数为response json lastCallback, // 调用最后response回调,参数为response json timeoutMs, // 执行超时时间 timeoutCallback // 超时回调,无参数 ) => { let nextSeqid = 0 let isSuccDone = false let timeoutChecker = new TimeoutChecker(timeoutMs) let uuid = makeUuid() data['step_track_uuid'] = uuid const doMainRequest = () => axios({ url: url, method: 'post', data: data, timeout: 3600000 }).then(function (response) { return response }) const handleResponseList = (stepRes) => { for (let response of stepRes.data.response_list) {// es6写法，只能用于数组let...of...，遍历value // eslint-disable-next-line stepCallback(eval('(' + response + ')')) //eval（）函数会执行字符串内的代码块，即：（response），符号：js代码块盒子，字母：定义的参数，数字：数值，运算符：正常拼接 } } const handleTimeout = () => { if (timeoutCallback) { let func = timeoutCallback timeoutCallback = null func() } } let interval = setInterval(() => { if (isSuccDone) { clearInterval(interval) handleTimeout() } else { if (timeoutChecker.isTimeout()) { clearInterval(interval) handleTimeout() } else { getResponseStepList(uuid, nextSeqid).then((stepRes) => { if (isSuccDone) { clearInterval(interval) } else { nextSeqid = stepRes.data.next_seqid handleResponseList(stepRes) } }) } } }, 2000) doMainRequest().then(res => { if (!timeoutChecker.isTimeout()) { isSuccDone = true clearInterval(interval) getResponseStepList(uuid, nextSeqid).then((stepRes) => { handleResponseList(stepRes) lastCallback(res.data) }) } else { handleTimeout() } }) }
引用：
import {stepRequest} from 'service/stepreq.js'
实际使用：
doPackageHandle () { Var logMsg = ‘’ // 数组push也行 var param = {//this.form 'gitpath': this.form.gitpath, 'branch': this.form.branch, 'desc': this.form.desc, } var stepCallback = (res) => { if (res.err_code === '0') { // console.log(res,”正在打包中..."); logMsg += res.info } else { logMsg = ‘打包失败’+res.err_desc } } var lastCallback = (res) => { if (res.err_code === '0') { // console.log(res,"成功”); logMsg += res.info } else { // console.log(res,"失败”); logMsg = ‘打包失败’+res.err_desc } } var timeoutCallback = (res) => { // console.log(res,”超时"); } doPackage(param, stepCallback, lastCallback, timeoutCallback) }
二、接口合并请求：
// 合并请求 export async function getFeatureTypeAll () { let a = axios.post(get_feature_type) let b = axios.post(get_feature_class) let res1 = await a let res2 = await b return { val1: res1.data.info || [], val2: res2.data.info || [] } }
【对比ES5与ES6对构造函数的定义】：
一、ES5是如何定义构造函数，并实例化后进行调用的：
//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数） function Person(name,age) { this.name = name; this.age=age; } Person.prototype.say = function(){//原型对象特点就是将自身的属性共享给新对象,即：继承 return "我的名字叫" + this.name+"今年"+this.age+"岁了"; } var obj=new Person("laotie",88);//通过构造函数创建对象，必须使用new 运算符实例化 console.log(obj.say());//使用这个实例化的对象定义的方法say():我的名字叫laotie今年88岁了
这里梳理一下进程：
1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
2.将构造函数的作用域给新对象，（即new Object()创建出的对象），而函数体内的this就代表new Object()出来的对象。
3.执行构造函数的代码。
4.返回新对象（后台直接返回）;
二、ES6通过class关键字可以定义类，该关键字的出现使得其在对象写法上更加清晰。
class Person{//定义了一个名字为Person的类
constructor(name,age){//constructor是一个默认构造方法，实例化后会自动调用，类似vue定义data(),或者react中定义参数
this.name = name;//this代表的是实例对象
this.age=age;
}
say(){//这是一个类的方法，注意千万不要加上function
return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
}
var obj=new Person("laotie",88);//可简单理解为：calss = function + prototype
console.log(obj.say());//我的名字叫laotie今年88岁了
注意：
1.在类中声明方法的时候，千万不要给该方法加上function关键字
2.方法之间不要用逗号分隔，否则会报错。 // 定义对象的区分 ，class可以理解为函数体
校验一下通过class构造的实例化对象：
console.log(typeof Person);//function console.log(Person===Person.prototype.constructor);//true
console.log(Person.prototype);//输出的结果是一个对象
///////////////////////////////////////////////////////////////
Person.prototype.say=function(){//定义与类中相同名字的方法。成功实现了覆盖！
return "我是来证明的，你叫" + this.name+"今年"+this.age+"岁了";
}
var obj=new Person("laotie",88);
console.log(obj.say());//我是来证明的，你叫laotie今年88岁了///////////////////////////////////////////////////////////////
Person.prototype.addFn=function(){ // 再追加一个方法addFn()
return "我是通过prototype新增加的方法,名字叫addFn";
}
var obj=new Person("laotie",88);
console.log(obj.addFn());//我是通过prototype新增加的方法,名字叫addFn既然prototype是一个对象，可利用es6对象合并批量添加实例化方法：
Object.assign(Person.prototype,{ getName:function(){ return this.name; }, getAge:function(){ return this.age; } })
var obj=new Person("laotie",88);
console.log(obj.getName());//laotie
console.log(obj.getAge());//88需要注意的是定义多个class,内部this是指代本身，因此：
class Desk{ constructor(){ this.xixi="我是一只小小小小鸟！哦"; } } class Box{ constructor(){ return new Desk();// 这里没有用this哦，直接new xxx实例化其他的类 } } var obj=new Box(); console.log(obj.xixi);//我是一只小小小小鸟！哦
其次判断实例化对象是否包含某个原型属性如何判断：
console.log(box.hasOwnProperty("xixi"));//true 只有自身存在。且可以等于underfind
console.log("xixi" in box);//true,无法区分自身和原型链上的属性
console.log(Obj.x !== undefined） //点( . )或者方括号( [ ] )不能判断可以等于undefind对象
class Box{
constructor(num1,num2){
this.num1 = num1;
this.num2=num2;
}
sum(){
return num1+num2;
}
}
var box=new Box(12,88);
console.log(box.hasOwnProperty("num1"));//true
console.log(box.hasOwnProperty("num2"));//true
console.log(box.hasOwnProperty("sum"));//false
console.log("num1" in box);//true
console.log("num2" in box);//true
console.log("sum" in box);//true
console.log("say" in box);//false
最后分析一下类的所有实例共享一个原型对象，它们的原型都是Person.prototype，所以proto属性是相等的，即打印对象显示的__proto__
class Box{ constructor(num1,num2){ this.num1 = num1; this.num2=num2; } sum(){ return num1+num2; } } //box1与box2都是Box的实例。它们的__proto__都指向Box的prototype var box1=new Box(12,88); var box2=new Box(40,60); console.log(box1.__proto__===box2.__proto__);//true
////////////////////////////////////////////////
box1.__proto__.sub=function(){ //修改原型属性影响全局原型属性，不推荐修改
return this.num2-this.num1;
}
console.log(box1.sub());//76
console.log(box2.sub());//20class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义。
//ES5可以先使用再定义,存在变量提升 new A(); function A(){ } //ES6不能先使用再定义,不存在变量提升 会报错 new B();//B is not defined class B{ }
------------end------------
