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());//20

class不存在變數提升，所以需要先定義再使用，因為ES6不會把類的宣告提升到代碼頭部，但是ES5就不一樣,ES5存在變數提升,可以先使用，然后再定義，

//ES5可以先使用再定義,存在變數提升
new A();
function A(){

}
//ES6不能先使用再定義,不存在變數提升 會報錯
new B();//B is not defined
class B{

}

------------end------------

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/145129.html

標籤：JavaScript

上一篇：JavaScript slice() 方法使用【轉】

下一篇：JS中檢測資料型別的方法及封裝一個通用的方法