一. 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封装导航栏
网络数据的请求
轮播图插件
推荐信息