vue-（3）PromiseVuex网络模块封装

Promise/Vuex/网络模块封装

1、Promise

ES6中一个非常重要和好用的特性就是Promise。

Promise是异步编程的一种解决方案。

避免当网络请求非常复杂时，就会出现回调问题。

1.1、Promise基本使用

new Promise((resolve,reject)=>{
setTimeout(function(){
resolve('xxx')
reject('Error Data')
},1000)
}).then(data=>{console.log(data);}).catch(error=>{console.log(error);})

new Promise很明显是创建一个Promise对象,小括号中((resolve, reject) => {})也很明显就是一个函数。成功：调用resolve(message)，这个时候，我们后续的then会被回调。失败：调用reject(error)，这个时候，我们后续的catch会被回调。

异步操作之后会有三种状态
pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

1.2、Promise链式调用

Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()函数
Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数

...
}).then(data=>{console.log(data);}).catch(error=>{console.log(error);})
.then(data=>{console.log(data);}).catch(error=>{console.log(error);})

2、Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

状态管理：把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。VueJS带给我们最大的便利是，所以要保证属性做到响应式，自己封装可能稍微麻烦一些，所以Vuex就是为了提供这样一个在多个组件间共享状态的插件。

2.1、Vuex的使用

创建一个文件夹store，并且在其中创建一个index.js文件
在index.js文件中写入如下代码

import Vuex from 'vuex'
import Vue  from  'vue'

Vue.use(Vuex)

const store = new Vuex.store({
state:{
	count:0
},
//Vuex中store数据改变的唯一方法就是mutation！
mutations:{
increment(state){state.count--}
}
})
export default store

然后挂载到Vue实例中，在main.js里面中

import  Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
el:'#app',
store,
render:h=>h(App)
})

使用Vuex的count

<template中><button @click="increment">+1</buttton>

<script>
export default {
name:'App',
components:{},
computed:{
  count:function(){return this.$store.state.count}
},
methods:{
increment:function(){this.$store.commit('increment')}
}
}

小总结

1、提取出一个公共的store对象，用于保存在多个组件中共享的状态
2、将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
3、在其他组件中使用store对象中保存的状态即可
通过th