init1(){return new Promise((resolve, reject) => { let data={ dateStr:this.time }; api.get('url', null).then( res => { //自己的操作 resolve() }).catch(err => { reject() });});}; init2(){return new Promise((resolve, reject) => { let data={ dateStr:th

vue中promise的使用 promise是处理异步的利器,在之前的文章<ES6之promise>中,我详细介绍了promise的使用, 在文章<js动画实现&&回调地狱&&promise>中也提到了promise的then的链式调用, 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法,由此来加深对promise的进一步理解. 背景 进入商品页,商品页的左侧是分类,右侧是具体的商品,一旦进入商品页,就把所有分类的商品请求出来,注意

在vue中平时的开发中我们应该都会遇到promise函数,比如我们常用的axios,resource这都是用来做http请求的插件. 在平时的开发里,关于axios我们可能是这样写的 import axios from 'axios' const get=()=>{ axios.get(url,params).then(()=>{正确的回掉}).catch(()=>{错误回调}) } 这里其实还是比较麻烦的我们需要写then()/catch().为了可以节省这两个函数的调用我们就可以这样

有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => { let createFetch = (type, url, params) => { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest() xhr.onreadystatechange = () =&

axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库,小编我也是从vue-resource转换过来的,差别说不来,我们讲一下axios在实际开发中的用法 如何在 Vue.js 中使用第三方库 axios特点 1.从浏览器中创建 XMLHttpRequests2.从 node.js 创建 http 请求3.支持 Promise API4.拦截请求和响应 (就是有intercept

使用Promise模拟浏览器确认框,可自定义标题,内容,按钮文字和类型 参数名 类型 说明 title String 标题 content String 内容 yesBtnText String 确认按钮文字,默认'确定' cancelBtnText String 取消按钮文字,默认'取消' type String info/success/warning/error,默认'' Confirm.vue <template> <transition name="fade"

Promise.all([ 需要异步一起执行的方法---------先做的事 ]).then(res=>{ 后做的事(先做的事已经做好了) }) 举栗子: Promise.all([ this.aaa() this.bbb() ]).then((res)=>{ this.ccc() });

export function getTypes(type) { return listDictItems({ code: type }).then((res) => { if (res.code == 200) { let list = res.body; // console.log('list',list); return list; } }) }; 组件中: getTypes('EP_TYPE').then((data) => {console.log('data',data)});/

在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个

当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. 首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身): const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

最近做小程序在调用后台接口的时候感觉总写很长一串,很冗杂.非常想念vue中promise封装的写法,于是自己初步封装了一下. 1.url 接口地址 2.headers请求头 3. params 请求参数 4.host 服务端地址 POST: export function httpPost(url, params,params,) { let promise = new Promise((resolve, reject) => { wx.request({ url: host + url, he

前语:目前工作在做的项目是前端基于vue的组件式开发,通过api接口调用,后端数据逻辑是一个c#实现的WCF服务 1.总结自己在c# .NET 4.5后的新异步方式  async搭配await来实现  一个重要的类Task(这个和之前的Therad类很相似) 1.1 首先async是一个修饰符,它只能用在方法或者事件处理程序的签名中,对于方法的话可分为有无返回值两种情况,Task<TResult>可以作为返回值类型 举例: private async Task Test_one_async()

声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理, 基础篇 说说你对MVVM的理解 Model-View-ViewModel的缩写,Model代表数据模型,View代表UI组件,ViewModel将Model和View关联起来 数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据 了解mvc/mvp/mvvm的区别 Vue2.x响应式数据/双向绑定原理 Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据.其中,Vi

当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载. 首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身): const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

前言 chapter1 store构造函数 1.constructor 2.get state和set state 3.commit 4.dispatch 5.subscribe和subscribeAction 6.watch和replaceState 7.registerModule和unregisterModule 8.hotUpdate和_withCommit chapter2 export install Q:Vuex如何实现装载的? chapter3 辅助函数 1.registerMu

一.登录机制 在项目中,我们可以大致得出一个登录的过程,主要分为  登录验证.登录保持.退出三个部分.登录验证是指客户端提供用户名和密码,向服务器提出登录请求,服务器判断客户端是否可以登录并向客户端确认. 登录保持是指客户端登录后, 服务器能够分辨出已登录的客户端,并为其持续提供登录权限的服务器.退出是指客户端主动退出登录状态.而登录保持容易想到的方案是,客户端登录成功后, 服务器为其分配sessionId(token), 客户端随后每次请求资源时都带上sessionId(token). 注意:

resolve => require(['../pages/home.vue'], resolve)这种写法是异步模块获取,打包的时候每次访问这个路由的时候会单调单个文件,按需加载,不过这种写法已经过时了. 懒加载 router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode:'history', routes: [ {

在vue项目中添加ESLint,new 一个 Promise 一直显示错误 :Expected the Promise rejection reason to be an Error 正常来说new 一个Promise 是这样写的,感觉没啥问题. return new Promise((resolve, reject) => { if (type) { resolve(1) } else { reject(0) } }) 但是项目中添加了 ESLint 你必须按照他的规范来. 如果直接  rej

android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经FQ成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrome://inspect 即可,另外,chrome只支持 android 4.4以上手机! IOS 只需要两步

使用vue init webpack 你的项目名称初始化一个vue的项目 安装依赖 npm install vue-resource http-proxy-middleware vuex koa 在项目的main.js中引入并注册下载的依赖 在main.js中引入vue-resource并注册到vue实例中 import VueResource from 'vue-resource' //用来请求接口 Vue.use(VueResource) //开启后请求就会以application/x-ww

patchUpload.vue?5e29:406 Uncaught (in promise) DOMException: Failed to execute 'readAsArrayBuffer' on 'FileReader': The object is already busy reading Blobs.