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
  • 相关阅读:
    基于【 Docker】四 || Docker常用镜像安装
    【静态延迟加载】self关键字和static关键字的区别
    【php设计模式】单例模式
    为什么要使用 SPL中的 SplQueue实现队列
    php中连接tcp服务的三种方式
    使用rsync工具构建php项目管理平台
    php 求两个数组的差集应该注意的事情
    lnmp环境快速搭建及原理解析
    nginx + lua 限制ip地址访问
    mysql主从复制搭建
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/9925614.html
Copyright © 2011-2022 走看看