美文网首页
vue ajax调用好用插件

vue ajax调用好用插件

作者: sssudo | 来源:发表于2017-10-24 15:28 被阅读0次

    一 axios

    1.官方介绍:

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

    从浏览器中创建XMLHttpRequests

    从 node.js 创建http请求

    支持PromiseAPI

    拦截请求和响应

    转换请求数据和响应数据

    取消请求

    自动转换 JSON 数据

    客户端支持防御XSRF

    2.安装

    安装vue脚手架情况下使用npm安装axios,之后导入即可使用

    使用 npm:

    $ npm install axios

    使用 bower:

    $ bower install axios

    在组件内导入axios

    import axios from 'axios'

    axios.get('url').then((data)=>data)  //使用请求到的数据

    在main.js导入,全局使用

    import axios from 'axios'

    import VueAxios from 'vue-axios'

    Vue.use(VueAxios,axios)

    之后就可以在任意组件使用axios进行ajax请求了

    .then(回调函数) 取到数据之后做的事

    this.axios.get('URL').then((response)=>{console.log(response)})

    当然axios还有很多其他的方法 可以参照官网使用 axios

    二 vue-resourse

    vue-resource是vue自带的ajax请求插件包含一下特点

    体积小

    1.vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。

    2.支持主流的浏览器

    3.和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。

    支持Promise API和URI Templates

    Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。

    URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。

    4.支持拦截器

    拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。

    拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。

    2.安装

    使用npm 

    npm install vue-resource --save

    3.使用

    全局注册vue resourse

    import VueResource from 'vue-resource' 

    Vue.use(VueResource);

    之后就可以全局使用了,在其他组件内通过以下方式使用

    Vue.http.get('URL', [options]).then(successCallback, errorCallback);

    暂时用的的只有这俩个,以后再补充

    相关文章

      网友评论

          本文标题:vue ajax调用好用插件

          本文链接:https://www.haomeiwen.com/subject/ixztpxtx.html