• 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
  • 相关阅读:
    功夫世界外挂发布测试
    k8s和docker日常使用命令
    notepad添加JSON插件菜单栏不显示的问题
    k8s中的网络
    MySQL日志系统之redo log和bin log
    OCR文字识别开源方案本地部署 hello
    .NET Core WebAPI post参数传递时后端的接收方式
    sqlserver 数据库自动备份
    对EF中5种实体状态System.Data.EntityState的一点理解
    造成跨域的原因和解决方法
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/9925614.html
Copyright © 2020-2023  润新知