vue-promise-交互-过滤器

最新推荐文章于 2023-10-24 16:50:32 发布
最新推荐文章于 2023-10-24 16:50:32 发布
阅读量319 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxx548888/article/details/115378131
版权

文章目录

promise

promise是一个异步解决方案，主要是为了解决回调地狱，回调地狱就是回调函数层层嵌套

传统的异步代码的可读性很差，所以，使用promise可以提高可读性

promise中有三个状态

  • padding等待
  • resolve 成功
  • reject 失败

promise中方法

  • then
  • catch
语法
new Promise((resolve,reject)=>{
               异步操作
                resolve(ok成功的信息)
                reject(err失败的信息)   
            })
promise案例
promise处理ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
    <script>
        function linkapi(url, method) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url,
           
                    type: method,
                    dataType: "json",
                    success(ok) {
                        resolve(ok)
                    },
                    error(err) {
                        reject(err)
                    }
                })
            })
        }
        linkapi("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187", "get").then((ok) => {
            console.log(ok)
        }).catch((err) => {
            console.log(err)
        })
    </script>
</body>
</html>

交互基本概念，数据请求

前端和后端的概念

任何一个应用程序都有前端和后端
前端：客户端，就是浏览器（pc端 手机端）
后端：服务器（性能很好的电脑）是提供计算服务的设备。

服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。
在这里插入图片描述

交互的应用场景（什么时候用到前后端交互）
  • 从后端获取一些数据，将其进行展示或计算
  • 将用户在页面中提交的数据发送给后端

Vue.js 交互

vue请求数据有Vue-resource、Axios、fetch三种方式。Vue-resource是Vue官方提供的插件，axios是第三方插件，fetch es6原生

Vue.js resource(官方提供的)交互 2.0停止更新了

Vue自身不带处理HTTP请求 如果想使用HTTP请求必须要引入 vue-resource.js 库它可以通过XMLHttpRequest发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。
Vue.js 交互借助于 $http 完成

 下载：npm install --save vue-resource

在这里插入图片描述
在这里插入图片描述

Axios的使用

Axios是第三方插件，不仅能在Vue里使用，还能再其他第三方库中使用例如react

下载：npm install  --save axios
Axios–get交互

get类型
语法：

axios.get('/路径?k=v&k=v}
.then((ok)=>{})
.catch((err)=>{})
Axios–post交互

post类型
语法：

axios.post('/user', {k:v,k:v })
.then(function (ok) { })
.catch(function (error) { });

实例化对象：
let param = new URLSearchParams();
添加发送数据参数
param.append(“key”, “value”);
在这里插入图片描述

Axios–综合交互

axios(utl:‘请求地址’,method:‘请求方式’,data/params:{k:v}).then((ok)=>{})
使用get发送数据的时候 使用params：{key:val}发送数据
使用post发送数据需要使用 var param=new URLSearchParams();修改传参方法
使用param.append(“uname”,“xixi”)添加数据并且使用data发送数据
在这里插入图片描述
在这里插入图片描述

promise封装的axios 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>   
     function linkapi(url,method){
            return new Promise((resolve,reject)=>{
                axios({
                    url,
                    method
                }).then((ok)=>{
                    resolve(ok)
                }).catch((err)=>{
                    reject(err)
                })
            })
        }

        linkapi("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187","get").then((ok)=>{
            console.log(ok)
        }).catch((err)=>{

        })
    </script>
</body>
</html>
promise封装的axios请求数据案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="node_modules/vue/dist/vue.min.js"></script>
   <script src="node_modules/axios/dist/axios.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <button @click="fun()">点我请求</button>
            <img src="1.gif" v-if="bool">
            <ul>
                <li v-for="(v,i) in arr">
                    {{v.commentTxt}}---{{v.createAt|xiaoming}}
                </li>
            </ul>

        </div>
        <script>
            Vue.filter("xiaoming",(val)=>{
                return val.substr(0,11)
            })

            new Vue({
                el:"#demodiv",
                data:{
                    bool:false,
                        arr:[]
                },
                methods:{
                 //axios请求放在方法
                    api(url,method){
                        return new Promise((resolve,reject)=>{
                            axios({
                                url,
                                method
                            }).then((ok)=>{
                                resolve(ok)
                            }).catch((err)=>{
                                reject(err)
                            })
                        })
                    },
                    fun(){
                        this.bool=!this.bool
                        this.api("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187","get").then((ok)=>{
                            console.log(ok.data.data.commentList)


                            this.arr=ok.data.data.commentList

                            this.bool=!this.bool
                        }).catch((err)=>{
                            console.log(err)
                        })
                    }
                },
                computed:{

                },
                watch:{

                }
            })


        </script>
</body>
</html>

过滤器

格式化展示数据-----把展示的语句快速的梳理成我们想要的内容时，就用过滤器

过滤器作用

在不改变数据的情况下，输出前端需要的格式数据
vue2x的时候，vue取消了内置的过滤器，如果想使用过滤器，那么就必须自定义过滤器
2.0中已经废弃了内置过滤器，需要我们自定义过滤器来使用filter

全局过滤器的定义方法

位置：创建实例之前

Vue.filter(‘sum过滤器的名字随便写’, function(va过滤的数据会自动传入l){
	return val + 4;
});

在这里插入图片描述

案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="node_modules/vue/dist/vue.min.js"></script>
   <script src="node_modules/axios/dist/axios.min.js"></script>
</head>
<body>

<!-- 全局过滤器
    写在实例之前
    Vue.filter("过滤器的名字随便写的",(你要过滤的数据会自动传入)=>{
        return  逻辑
    })
-->


        <div id="demodiv">
            aaaaaaaaa
            <h1>{{text|xiaoming}}</h1>
        </div>


        <div id="demodivb">
            bbbbbbbbbbb
            {{text|xiaoming}}
            <h1>{{num|xiaohong}}</h1>
        </div>
        <script>

            Vue.filter("xiaoming",(val)=>{
                return "《《"+val+"》》"
            })


            Vue.filter("xiaohong",(val)=>{
                return "￥"+val
            })


            new Vue({
                el:"#demodiv",
                data:{
                  text:"demodiv"
                                }
            })

            new Vue({
                el:"#demodivb",
                data:{
                    text:"demodivb",
                  num:19.9
                }
            })


        </script>
</body>
</html>
Vue.js 局部过滤器

只能在当前vue注册内容中使用
在vue实例中与el属性data属性同级定义

filters：{
过滤器名字:function(val){
	return 输出内容
    }
}

过滤器的调用方法
{{ msg | sum }}
注意事项
定义全局过滤器，必须放在Vue实例化前面
在没有冲突的前提下，过滤器可以串联

何小仙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 方法中调用过滤器_管理 Vue 应用中的异步调用 vue-asyn-manager
weixin_34722157的博客
02-04 674
使用 vue-asyn-manager 管理 Vue 应用中的异步调用不知道大家对 React Suspense 是否有过关注，也许 Suspense 让人比较激动的是在服务端的流式渲染，然而从目前来看，React Suspense 的功能其实就是个 Loadable。当然啦这是我个人的看法，不过这不是今天的重点，今天的重点是介绍如何在 Vue 应用中更好的管理异步调用，那为什么会扯到 React...
promise-filter:过滤数组并返回Promise
05-22
诺言过滤器 数组并返回 。 安装 $ npm install promise-filter 用法 const filter = require ( 'promise-filter' ) Promise . resolve ( [ 1 , 2 , 3 ] ) . then ( filter ( ( val ) => val >= 2 ) ) // => [2, 3] 为什么？ 这个模块基本上等效于 ，但是拥有您需要的一个功能而不是厨房水槽很方便。 模块化！ 如果您要投放到浏览器，并且需要减小JavaScript包的大小，则特别方便。 使用在浏览器中很好用！ 也可以看看 减少承诺 有前途的 执照 麻省理工学院
Vue的过滤器、生命周期钩子函数、组件开发、路由、Promise基本使用语法
前端、python爱好者
07-19 574
过滤器的使用 {{参数 | 过滤器名（形参）}} //这里面的形参可多个 Vue.filter('过滤器名‘，处理函数方法（形参）{ 方法体}） //这里的形参第一个参数为div中的参数，第二个为过滤器传过来的值 注：过滤器可以多次调用 如： {{参数 | 过滤器名1（形参）| 过滤器名2（形参）}} //这里面的形参可多个 ========================================================================== 生命周期执行期
[前端漫谈_3] 从 filter 聊到 Promise
weixin_34405925的博客
03-20 191
前言 在学习前端的时候，我总是能听到很多高级词汇，比如今天会聊到的 函数式编程(Functional Programming) & 高阶函数 (Higher-order function) 。 但是当你真正的理解什么是 函数式编程 & 高阶函数 的时候，也许会发现，你几乎每天都会用到它，只是你不知道那就是高阶函数 / 函数式编程。 JavaScript 中的函数 在 javascr...
async-filter:基于 Promise 的可迭代过滤器
06-09
异步过滤器 过滤，承诺！ 用法 var promiseFilter = require ( 'async-filter' ) ; promiseFilter ( [ 'a' , 'b' , 'c' ] , function ( item ) { return Promise . resolve ( true ) ; } ) . then ( function ( result ) { console . log ( result ) ; } ) ; // Outputs: ['a', 'b', 'c'] 执照 麻省理工学院。 版权所有 (c) 2015 Samuel Giles
Vue-Resources
04-11
Vue-Resources简化了与服务器的数据交互，使得在Vue项目中进行Ajax通信变得更加便捷。 Vue-Resources的主要特性包括： 1. **简单易用的API**：Vue-Resources提供了一套直观的API，如`$http.get()`, `$http.post()`...
vue2.0结合Element-ui实战案例
10-17
对于日期列，可以使用`moment`过滤器格式化日期： ```html <template slot-scope="scope"> <span>{{ scope.row.date | moment }} ``` 此外，案例中还可能涉及与后端接口的交互，如通过`axios`发送HTTP请求获取或...
axios.js和vue.js和vue-resource.js
01-15
Vue.js中的数据绑定、指令、组件、计算属性、过滤器、过渡效果等功能，让开发者能够构建复杂的用户界面。比如，`v-model`指令允许双向数据绑定，`v-if`和`v-for`用于条件渲染和循环，而组件系统则能实现代码复用和...
vue2autocomplete一个Vue2的文本输入自动完成组件
08-10
3. **过滤器**：允许用户自定义过滤器，根据输入值对数据源进行筛选。 4. **提示项**：可以配置提示项的模板，展示更多关于建议的信息，如图片、描述等。 5. **事件处理**：提供了如`select`、`input`、`focus`、`...
vue20王者荣耀助手
08-12
在Vue.js 2.0中，核心概念仍然包括组件、指令和过滤器。组件是Vue.js的核心特性，允许开发者将复杂的应用拆分为可重用的部分。在这个“王者荣耀助手”项目中，可能包含了多个组件，比如英雄展示、比赛统计、玩家信息...
《信息可视化：交互设计（原书第2版）》——2.13节过滤
weixin_33729196的博客
08-01 110
2.13 过滤对于消费者而言，过滤是一个很实用的功能。例如，如果消费者只对价格在16～18万元的汽车感兴趣，可以通过某些交互技术保证条形图中只呈现符合该价格条件的汽车（图2-13）。这种过滤功能的一大优势在于数据抑制（suppression），它可以将用户的注意力集中在某个数据子集上，从而减少可能的认知成本。从图2-13中可以看到，过滤技术的不足在于...
VueJS极简教程之四：过滤器（filter）
大道至简
11-26 611
主要用于格式化数据使用，以下我们来详细介绍。 Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： &amp;amp;lt;!-- 在双花括号中 --&amp;amp;gt; {{ message | capitalize }} &amp;amp;lt;!--...
vue2技能树（10）-异步组件，过滤器
最新发布
张羽的博客
10-24 458
✏️ 评论，你的意见是我进步的财富！
vue自定义指令，过滤器，异步请求等处理
qq_45196214的博客
07-01 2460
文章目录一：自定义指令二：过滤器三：计算属性，方法，侦听器对比四：vue异步请求的方法五：懒加载（按需加载路由）六：Render渲染函数 一：自定义指令 vue.directive('指令名',{})//第二个参数是与指令有关的函数 bind:function(el,binding){}//el是绑定自定义指令的元素，binding为指令处理函数的相关属性，通常与样式相关的函数放在bind函数中，与行为相关的如keyup放于inserted中 inserted:function(el,binding){}/
Yalantis 出品：搜索过滤器交互效果 (代码家)
阿依土鳖王子の博客
12-14 416
https://github.com/Yalantis/SearchFilter
vue过滤器使用总结
xiaoxiao1777的博客
05-01 138
应用场景： 页面经常会对当前日期进行自定义的格式化显示，页面的显示框使用过滤器表达式，<script>中使用过滤器函数，日期库使用moment.js 代码： <div> <h2>显示格式化的日期和时间</h2> <p>完整版：{{date | dateString('YYYY-MM-DD')}}</p>...
vue过滤器 filter
zengxingX的博客
10-26 288
vue过滤器-定义使用 转换格式，过滤器就是一个函数，传入值返回处理后的值 过滤器只能用在插值表达式和v-bind表达式 语法： VUE.filter(“过滤器名”，（值) =>{return "返回处理后的函数的值"}) filters：{过滤器的名字：（值）=>{return "返回处理后的值"}} 全局过滤器写在 main.js 局部过滤器写在 App.vue 的exprot default 里面 <template> <div> ...
vue过滤器，计算属性，侦听器
m0_60507322的博客
11-24 333
一. vue过滤器 1.定义及使用 过滤器只能用在, 插值表达式与 v-bind 表达式中 语法: 全局定义的过滤器,在main.js 中定义 Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) 局部定义的过滤器 filters: {过滤器名字: (值) => {return "返回处理后的值"} 2.传参与多过滤器 可同时使用多个过滤器, 或者给过滤器传参 ...
vue-promise
09-08
Vue Promise是一个基于Vue的扩展库，用于处理异步操作。它是基于Promise对象的框架简写，并提供了一些便利的方法来处理异步操作。 在Vue Promise中，可以使用Promise方法的框架简写来处理异步操作。这种简写方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值