vue（学习笔记总结三）

一. promise

1.1promise的基本使用

        什么是promise 用来执行异步任务，解决回调地狱

Promise是一个构造函数，自身上有all、resolve、reject这几个方法，原型上有then、catch等同样的方法。

        如何将异步操作放入到promise中

通过new promise 新建一个构造函数 ，（resolve，reject）=> then/catch

1.2 promise的链式调用

new Promise((resolve,reject) => {
      setTimeout(() => {
        resolve('aaa')
      },1000)
    }).then(res => {
      console.log(res + '打印了10行');
      return res + '111'
    }).then(res => {
      console.log(res + '打印了10行');
      return res + '222'
    }).then(res => {
      console.log(res + '打印了10行');
    })

在引用了promise后再引用可直接简写成return +内容 

相当于 return new promise

1.3 promise的all方法

new promise.all（{多个异步同时进行}）

二. Vuex

2.1 什么是状态管理

简单理解成需要多个组件共享的变量全部存储在一个对象里面，响应式的公共组件

单页面

2.2 vuex的基本使用

 state 》直接修改state （错误）

只有通过mutations修改才能被浏览器的devtools监听

2.3 核心概念

state > 单一状态树

 mutations >相当于methods 方法

getters >相当于computed计算

（同步通过commit传参给mutations）（异步通过dispatch传参actions）

actions >异步操作（promise）

modules > 

常量 > 创建一个公共的文件把需要传给mutations的方法设置成一个常量，引入即可，减少代码出错

2.4目录组织方式 

除state外，其余四个可通过创建js模块导入index.js让代码可读性搞，异于维护性

三.网络请求封装axios

3.1 网络请求方式的选择 

3.2 axios的相关配置

axios的基本使用

axios的多个请求合并 axios.all 相当于promise.all

axios的公共配置  如：baseURL = ‘’    timeout = ‘’ （针对一个ip地址）

axios的实例 

当有多个IP地址时，若使用公共配置容易报错，所以创建对应的实例（axios.creat）

aixos的封装 减少对第三方插件的依赖

通过封装一个函数来调用axios，异于维护，修改（可在封装的函数内创建实例）

对一些数据做出修改  拦截请求 interceptors.request.use（）

拦截响应 interceptors.response.use（）

四 项目开发

4.1 划分目录结构

4.2 引用两个css文件

4.3 vue.config.js 配置起别名 和 editorconfig

4.4 项目模块的划分 tabbar ->路由映射关系 

4.5 首页开发

        navbar封装导航栏

        网络数据的请求

        轮播图插件

        推荐信息