zoukankan      html  css  js  c++  java
  • axios 进行类库封装

    /**
    * 业务线的代码解析
    */
    , 对于页面DNS - prefetch预获取提升页面载入速度浏览器载入页面时候对于当前的域名进行解析和缓存
    当点击页面的时候无需进行DNS解析减少了用户等待的时间提供了用户体验
    1减少DNS请求次数
    2另一个就是进行DNS预获取
    使用: <link rel="dns-prefetch" href="//static.daojia.com">
    mian.js--代码解析
    1babel - polyfill有些浏览器对于es6支持还不是很完善所有需要添加babel - polyfill
    2,import Meta from 'vue-meta'
    Vue.use(Meta)
    引入vue-meta可以直接对头部的TITLE进行设置
    3import VueAwesomeSwiper from 'vue-awesome-swiper'
    支持轮播的组件的引用
    // 封装的http方法
    1, Vue.prototype.$http = http
    代码实例如
    2使用模块的按需加载提高首屏效率
    const Mall = () => import(/* webpackChunkName: "group-mall" */ '@/views/Mall')
    /**
    * 封装了http的案例
    */
    import axios from 'axios'
    import qs from 'qs'
    /**
    * 全局ajax调用
    * @param {string} url 接口url
    * @param {string} method 请求方式 get/post
    * @param {object} params 请求参数对象,get和post请求会自动拼到该待的地方
    * @param {function} callback 成功回调,非必填
    * @param {function} error 失败回调,非必填(如果不填将由全局报错进行处理)
    * @param {boolean} noQs 非必填,个别奇葩表单不需要QS处理,传这个参数
    * @description 封装的方法会加入Vue.prototype上,调用示例:
    * this.http('/api/getInfo', 'get', {
    * name: 'abc'
    * }, res => {
    * console.log('接口返回数据', res)
    * }, err => {
    * console.log('接口报错', err)
    * })
    */
    function http (url, method, params, callback, error, noQs) {
    axios({
    url,
    method,
    params: method === 'get' && params !== null ? params : null, // get请求参数,会拼接到url后面
    data: method === 'post' && params !== null ? (noQs ? params : qs.stringify(params)) : null, // post请求参数,位于请求体,qs转换可选
    withCredentials: true // 允许携带跨域许可(authorization和cookie),使用三端统一登录之类接口需要用到
    })
    .then(res => {
    // 请求成功回调
    let result = res.data
    if (result.code === 0) {
    // 与后台约定的成功状态码
    callback && callback(result)
    } else {
    // 错误处理,优先以自定义的的handle进行处理,没有则统一进行错误处理
    if (error) {
    error(result)
    } else {
    console.log('接口报错', result)
    // 可进行特殊错误码的全局处理,如token失效等
    }
    }
    })
    .catch(err => {
    // 请求失败处理
    console.log('网络开小差', err)
    error && error(err)
    })
    }
    export default http
  • 相关阅读:
    php多态
    二分查找法
    mysql联合索引详解
    PHPFastCGI进程管理器PHP-FPM详解
    IDEA Spark程序报错处理
    逻辑回归与多项逻辑回归
    特征选择--->卡方选择器
    特征变化--->特征向量中部分特征到类别索引的转换(VectorIndexer)
    特征变化--->标签到向量的转换(OneHotEncoder)
    特征变化--->索引到标签的转换(IndexToString)
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/9925614.html
Copyright © 2011-2022 走看看