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
原文地址:https://www.cnblogs.com/yayaxuping/p/9925614.html