Vue项目开发经验2

1.network网络相关配置（封装axios,设置拦截响应和拦截请求）

• 通常开发项目为了简化我们的运维，和维护代码，我们通常将网络请求封装起来。
• 在network里面封装好request请求
• 并且配置拦截以及baseURL和请求超时的限制。

//1.引入axios
import axios from 'axios'


//通过promise 封装

export function request(config){
    return new Promise((resolve, reject) => {
        //1.创建axios的实例
        const instance = axios.create({
            baseURL:'http://109.23.21.32:8000',
            timeout:5000
        })

        //2.axios的拦截器
        //2.1请求拦截的作用
        instance.interceptors.request.use(config => {
            // console.log(config);  //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
            return config  //return 出去的话就可以拿到请求的数据了
        },
        err=>{
            // console.log(err);  //来到这里的情况比较少
        })

        //2.2响应拦截的作用
        instance.interceptors.response.use(result => {
            return result.data
        },
        err => {
            console.log(err);
        })

        //3.发送真正的请求
        instance(config)
        .then(res => {
            resolve(res);
        })
        .catch(err => {
            reject(err);
        })
    })
}

• 之后当我们home页要请求某些数据的时候，在network下创建home.js直接引入request.
• 以函数的形式return出去我们封装好的Promise对象，在home页中调用函数请求数据.then保存数据，处理数据。

import {request} from "./request";


export function getHomeMultidata() {
  return request({
    url: '/home/multidata'
  })
}

export function getHomeGoods(type, page) {
  return request({
    url: '/home/data',
    params: {
      type,
      page
    }
  })
}

2.数据的请求和存储，以及处理问题

• 根据上面我们拿到数据之后，然后需要保存数据，以及将数据处理成为我们想要的形式。
• 在data中新增数据段，准备收我们请求的数据

 data() {
    return {
      data: "",
      iid: null,
      res: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      themeTopYs: [],
      currentIndex: 0,
      isFixed: false
    };
  },

3.view页面组件的目录结构和使用的解析

• 举个例子，当我们项目里面有5个分页的时候，就需要在views里面创建相应的文件夹，而且每一个文件夹对应有一个childComps里面放置仅属于自己的组件。
• 这样方便我们维护和管理代码。

4.store页面的目录结构和文件抽离的解析

• store页面也要将actions，getters，mutations等抽离出来，方便代码的统一管理和维护。

下一篇：Vue重点学习经验1

• 对于MVVM的理解
• Vue的生命周期
• 父子组件传值