vue常见问题（2）

• axios封装和api接口的统一管理
• 定时器问题
• rem文件的导入问题
• 组件中写选项的顺序
• 开启gzip压缩代码
• 详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷新数据的实践
• css的scoped私有作用域和深度选择器
• hiper打开速度测试
• 可选链操作符
• 利用闭包构造map缓存数据

1，axios封装和api接口的统一管理

network
    api.js
    http.js
    request.js

http.js 文件配置

import axios from 'axios'; // 1，引入axios

// 2，环境的切换
if (process.env.NODE_ENV == 'development') { // 开发环境
    axios.defaults.baseURL = 'https://www.development.com';
} else if (process.env.NODE_ENV == 'testing') { // 测试环境
    axios.defaults.baseURL = 'https://www.testing.com';
} else if (process.env.NODE_ENV == 'production') { // 生产环境
    axios.defaults.baseURL = 'https://www.production.com';
}

// 3, 设置请求超时  通过axios.defaults.timeout设置默认的请求超时时间。
axios.defaults.timeout = 10000;

// 4, post请求头的设置  post请求的时候，需要加上一个请求头，在这里设置一个默认的值
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 5 请求拦截要执行判断token值，在发送请求前，进行请求的拦截，需要用户登录校验

// 请求拦截器  每次响应请求时，拦截器中要执行的操作，判断是否有 token 并且token是否过期了
axios.interceptors.request.use(
    config => {
        // 每次发送请求之前判断本地存储是否存在token        
        // 如果存在，则统一在http请求的header都加上token
        // 即使本地存在token也有过期情况，所以在响应拦截器中要对返回状态进行判断 
        const token = window.localStorage.getItem('token');
        token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.error(error);
    })

// 6 请求响应要执行判断返回值
axios.interceptors.response.use(
    response => {
        if (response.status === 200) {// 如果返回的状态码为200，说明接口请求成功
            return Promise.resolve(response);
        } else { // 否则的话抛出错误
            return Promise.reject(response);
        }
    },
    error => { // 服务器状态码不是2开头的的情况，跟后台协商好统一的错误状态码
        if (error.response) {
            errorHandle(error.response.status, error.response.data)
            return Promise.reject(error.response);
        }
    }
)

// 封装 接口错误信息报错函数
const errorHandle = (status) => {// 状态码判断
    switch (status) {
        case 401:  // 401: 未登录状态，跳转登录页
            toLogin();
            break;
        case 403: // 403 token过期，清除token并跳转登录页
            console.log('登录过期，请重新登录');
            localStorage.removeItem('token');
            setTimeout(() => {
                toLogin();
            }, 1000);
            break;
        case 404:  // 404请求不存在
            console.log('请求的资源不存在');
            break;
        default:
            console.log('其他错误信息')
    }
}

// 7，封装请求方式  对应get/post请求
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, params)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    })
}
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    })
}

api.js

export function getProcinst ('xxxxx', params) {
  return get(url, params)
}

在main.js中，设置vue原型上

import api from './network/api' 
Vue.prototype.$api = api; // 将api挂载到vue的原型上