sxx的技术专栏 Nodejs and Javascript Coder

千分位和数字，axios

2018-11-04
blockxia

阅读：

千分位转换,其他封装

1. 数字转换位千分位 千分位转换位数字


	//  数字转换位千分位 千分位转换位数字
    function commafy(num) {
      //1.先去除空格,判断是否空值和非数   
      num = num + "";
      num = num.replace(/[ ]/g, ""); //去除空格  
      if (num == "") {
        return;
      }
      if (isNaN(num)) {
        return num;
      }
      //2.针对是否有小数点，分情况处理   
      var index = num.indexOf(".");
      if (index == -1) {//无小数点   
        var reg = /(-?\d+)(\d{3})/;
        while (reg.test(num)) {
          num = num.replace(reg, "$1,$2");
        }
        num += ".00";//强制转为含角分   pcj
      } else {
        var intPart = num.substring(0, index);
        var pointPart = num.substring(index + 1, num.length);
        //如果输入小数位为1位，追加0
        if (pointPart.length == 1) {
          pointPart += "0";
        }
        var reg = /(-?\d+)(\d{3})/;
        while (reg.test(intPart)) {
          intPart = intPart.replace(reg, "$1,$2");
        }
        num = intPart + "." + pointPart;
      }
      return num;
    }

    console.log(commafy(123456))//123,456.00
    console.log(commafy(1233254235456))
    /**  
     * 去除千分位  
     *@param{Object}num  
     */
    function delcommafy(num) {
      num = num.toString();
      num = num.replace(/[ ]/g, "");//去除空格  
      num = num.replace(/,/gi, '');
      return Number(num);
    }

    console.log(delcommafy(commafy(123456)));
    console.log(delcommafy(commafy(1233254235456)));

2. 单独Vue中把后台数据转换为千分位

```js
import Vue from 'vue'   Vue.filter('NumFormat', function (value) {
if (!value) return '0.00'
if (value === '0') return '0.00'
//  获取整数部分
// let intPart = Number(value).toString.split('.')
let temp = String(value).split('.')
// let dot = intPart.indexOf('.')
// console.log('测试', intPart)
// console.log('测试', dot)
let intPart = temp[0]
// var intPart = Number(value).toFixed(0)
//  将整数部分逢三一断
var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
//  预定义小数部分
var floatPart = '.00'
var value2Array = value.split('.')
//  =2表示数据有小数位
if (value2Array.length === 2) {
  //  拿到小数部分
  floatPart = value2Array[1].toString()
  //  补0,实际上用不着
  if (floatPart.length === 1) {
    return intPartFormat + '.' + floatPart
  } else {
    return intPartFormat + '.' + floatPart
  }
} else {
  return intPartFormat
}   })

```

3. 封装js利用vue filter使用类型

```js
————   export const status = (state) => {
switch (state) {
  case '0':
    return '未上传'
  case '1':
    return '未预估'
  case '2':
    return '正常'
}   }

export const send = (state) => { switch (state) { case ‘10A’: return ‘已下载’ case ‘10B’: return ‘未下载’ } }

export const gradeStatus = (state) => { switch (state) { case ‘10B’: return ‘未处理’ case ‘10A’: return ‘已处理’ } } ———— 1.引入import { status } from ‘../../filter/runGradeState’ 2.使用过滤 filters: { status } 3.写入表达式 ```

4.封装axios拦截器

import Axios from 'axios'
import router from '../router'
import { Toast } from 'vant'
import store from '../store'
import getuuid from './getUUID'
import { LGet } from './storage'
import { format } from '../filter/date'
import judge from './device'
var logData = ''
var httpUuid = ''
var user = LGet('user') || ''
// 建立请求对象
const service = Axios
/* const service = Axios.create({
  // baseURL: process.env.API_HOST, // api的base_url
  timeout: 1000 // request timeout
}) */
// 请求拦截器
service.interceptors.request.use(
  config => {
    httpUuid = getuuid(16, 16) // 生成请求uuid
    let account = ''
    let userPhone = ''
    if (config.url.indexOf('user/userLogin') !== -1) { // 如果为登录接口
      account = config.params.account
      userPhone = config.params.account
    } else {
      account = user.userName
      userPhone = user.phone
    }
    logData = {
      serverType: 'vue',
      logUuid: httpUuid,
      userId: user.id,
      userName: account,
      realIp: '',
      reqUrl: config.url,
      reqParam: config.params ? JSON.stringify(config.params) : '',
      repUrl: '',
      repParam: '',
      repData: '',
      logType: '1', // 1请求，2系统
      logLevel: '',
      resultCode: '',
      resultMsg: '',
      logErrInfo: '',
      logCreateTime: format(new Date(), 'YYYY-MM-DD HH:mm:ss'),
      logUploadTime: '',
      mobile: userPhone,
      netWork: '',
      appUuid: '',
      appType: '',
      appVersion: '',
      phoneType: '',
      phoneVersion: '',
      phoneWebView: '',
      httpStartTime: new Date().getTime(),
      httpEndTime: '',
      httpDuration: '',
      httpServer: 'app-backend'
    }
    if (config.url.indexOf('upload/json/fileUpload') !== -1) { // 如果为文件上传服务
      logData.httpServer = 'lf-files'
    }
    // const url = config.url
    const token = store.state.user.token
    /* if (!token) {
      store.dispatch('user/getLocalUser')
    } */
    /* // 判断是否为第三方请求 比如阿里oss直传
    if (url.indexOf('http') === 0) {
      // console.log(config)
      return config
    } */
    if (config.timeout === 0) {
      config.timeout = 20000
    }
    // 头部请求添加token
    if (token !== '') {
      config.headers.token = token
    }
    config.headers.logUuid = httpUuid
    // 安全策略配置
    // config.withCredentials = true
    // 拼接请求主域名
    // config.url = DOMAIN + config.url
    // config.responseType = 'json'
    return config
  },
  err => {
    // 日志上传参数
    logData.logLevel = '1'
    logData.logErrInfo = JSON.stringify(err)
    logData.httpEndTime = new Date().getTime()
    logData.httpDuration = logData.httpEndTime - logData.httpStartTime
    // console.log(logData) // 调用原生上传日志方法
    if (judge !== null) {
      judge.uploadLog(logData)
    }
    // console.log(err)
    return Promise.reject(err)
  })
// 响应拦截器
service.interceptors.response.use(
  response => {
    // console.log(response)
    // 日志上传参数
    logData.repData = JSON.stringify(response.data)
    logData.resultCode = response.status
    logData.resultMsg = response.data.resultMessage
    logData.httpEndTime = new Date().getTime()
    logData.httpDuration = logData.httpEndTime - logData.httpStartTime
    // console.log(logData) // 调用原生上传日志方法
    if (judge !== null) {
      judge.uploadLog(logData)
    }
    // 响应处理 如果响应code码为token失效那么返回至登录页
    if (response.status === 200) {
      switch (response.data.resultCode) {
        case '0001':
          router.replace({
            path: '/login'
          })
          Toast(response.data.resultMessage)
          return response.data
        case '200':
          return response.data
        default:
          if (response.data.resultMessage) {
            Toast(response.data.resultMessage)
          }
          return response.data
      }
    }
  },
  error => {
    // 日志上传参数
    logData.logLevel = '1'
    logData.logErrInfo = JSON.stringify(error)
    logData.httpEndTime = new Date().getTime()
    logData.httpDuration = logData.httpEndTime - logData.httpStartTime
    // console.log(logData) // 调用原生上传日志方法
    // console.log(JSON.stringify(error))
    if (judge !== null) {
      judge.uploadLog(logData)
    }
    if (error && error.response) {
      switch (error.response.status) {
        case 400: error.message = '请求错误(400)'; break
        case 401: error.message = '未授权, 请重新登录(401)'; break
        case 403: error.message = '拒绝访问(403)'; break
        case 404: error.message = '请求出错(404)'; break
        case 408: error.message = '请求超时(408)'; break
        case 500: error.message = '服务器错误(500)'; break
        case 501: error.message = '服务未实现(501)'; break
        case 502: error.message = '网络错误(502)'; break
        case 503: error.message = '服务不可用(503)'; break
        case 504: error.message = '网络超时(504)'; break
        case 505: error.message = 'HTTP版本不受支持(505)'; break
      }
    } else {
      error.message = '网络异常，请稍后重试'
    }
    Toast(error.message)
    // 响应错误拦截
    return Promise.reject(error) // 返回接口返回的错误信息
  })
export default service

5.判断设备

// 判断设备
/**
 * @function judge
 * @returns {object} object
 * @return {function} object.loginData 传登录后的数据
 * @return {function} object.phone 打电话
 * @return {function} object.clearCache 清除缓存
 * @return {function} object.href 跳转到链接
 * @return {function} object.dbNumber icon显示未读数
 */
let object = {}
isWeiXin()
if (window.android && !isWeiXin()) {
  // 传登录后的数据
  object.loginData = (data) => {
    window.android.loginData(JSON.stringify(data))
  }
  // 打电话
  object.phone = (phone) => {
    // 这么调用的原因是因为 如果赋值给一个新的变量原生就无法监听了
    window.android.phone(phone)
  }
  // 清理缓存
  object.clearCache = () => {
    window.android.clearCache()
  }
  // 跳转到链接
  object.href = (url) => {
    window.android.href(url)
  }
  // icon显示未读数
  object.dbNumber = (number) => {
    window.android.dbNumber(number)
  }
  // 下载图片
  object.saveImg = () => {
    window.android.saveImg()
  }
  // 点击立即升级 跳转页面
  object.BeginUpgrade = (url) => {
    window.android.BeginUpgrade(url)
  }
  // 无网络时，点击重新加载
  object.noData = () => {
    window.android.noData()
  }
  // 分享工单
  object.shareGD = url => {
    window.android.shareGD(url)
  }
  // 日志上传
  object.uploadLog = (data) => {
    window.android.uploadLog(JSON.stringify(data))
  }
  // 退出登录
  object.quitLogin = () => {
    window.android.quitLogin()
  }
  // 获取缓存文件
  object.getCacheSize = () => {
    window.android.getCacheSize()
  }
} else if (window.webkit && !isWeiXin()) {
  // 传登录后的数据
  object.loginData = (data) => {
    window.webkit.messageHandlers.loginData.postMessage(data)
  }
  // 打电话
  object.phone = (phone) => {
    // window.webkit.messageHandlers.phone.postMessage(phonephone)
    window.webkit.messageHandlers.phone.postMessage(phone)
  }
  // 清理缓存
  object.clearCache = () => {
    window.webkit.messageHandlers.clearCache.postMessage(null)
  }
  // 跳转到链接
  object.href = (url) => {
    window.webkit.messageHandlers.href.postMessage(url)
  }
  // icon显示未读数
  object.dbNumber = (number) => {
    window.webkit.messageHandlers.dbNumber.postMessage(number)
  }
  // 下载图片
  object.saveImg = () => {
    window.webkit.messageHandlers.saveImg.postMessage(null)
  }
  // 点击立即升级 跳转页面
  object.BeginUpgrade = (url) => {
    window.webkit.messageHandlers.BeginUpgrade.postMessage(url)
  }
  // 无网络时，点击重新加载
  object.noData = () => {
    window.webkit.messageHandlers.noData.postMessage(null)
  }
  // 分享工单
  object.shareGD = (url) => {
    window.webkit.messageHandlers.shareGD.postMessage(url)
  }
  // 日志上传
  object.uploadLog = (data) => {
    window.webkit.messageHandlers.uploadLog.postMessage(data)
  }
  // 退出登录
  object.quitLogin = () => {
    window.webkit.messageHandlers.quitLogin.postMessage(null)
  }
  // 获取缓存
  object.getCacheSize = () => {
    window.webkit.messageHandlers.getCacheSize.postMessage(null)
  }
} else {
  // 怀疑android JS 注入有延迟
  object = null
}
function isWeiXin () {
  var ua = window.navigator.userAgent.toLowerCase()
  if (ua.indexOf('micromessenger') !== -1) {
    return true
  } else {
    return false
  }
}
export default object

Similar Posts

上一篇 vue实用技巧

下一篇 react项目的技术选型

Comments

Content