Vue resource中的GET与POST请求的实例代码

前言：vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能，还提供了比如 interceptors 这样处理请求过程中行为的功能。下面介绍下vue-resource中常用的GET与POST请求使用与封装方法。

访问 Github获取最新的开发文件与文档

特征：

  1. 支持 Promise API 和 URI Templates
  2. 支持请求过程中使用拦截器（interceptoers）
  3. 支持 Firefox，Chrome，Safari，Opera 和 IE9+
  4. 非常的小（压缩后之后14KB，在启用 gzipped后只有5.3KB）

参数说明：

参数说明很多文章里面所已经说过了，这里只使用必须用到的参数，具体请访问 Github 中的 Document

GET请求

function getRequest(url, params) {
 return new Promise((resolve, reject) => {
  Vue.http.get(
   url,
   {
    params: params
   },
   {emulateJSON: true}
  )
  .then((res) => {
   resolve(res);
  })
  .catch((res) => {
   reject(res);
  });
 });
}

POST请求

function postRequest(url, params) {
 return new Promise((resolve, reject) => {
  Vue.http.post(
   url,
   {
    params
   },
   {emulateJSON: true}
  )
  .then((res) => {
   resolve(res.body);
  })
  .catch((res) => {
   reject(res.body);
  });
 });
}

使用方法

var params = new Object(); //创建params对象
var params.id = id; //传递参数
var url = url; //url地址
postRequest(url, params)
.then((message) => {
 //这里处理成功回调
})
.catch((message) => {
 //这里处理失败回调
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue resource post请求时遇到的坑

    使用 post 请求 // global Vue object Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // in a Vue instance this.$http.get('/someUrl', [options]).th

  • Vue resource中的GET与POST请求的实例代码

    前言:vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能,还提供了比如 interceptors 这样处理请求过程中行为的功能.下面介绍下vue-resource中常用的GET与POST请求使用与封装方法. 访问 Github获取最新的开发文件与文档 特征: 支持 Promise API 和 URI Templates 支持请求过程中使用拦截器(interceptoers) 支持 Firefox,Chrome,Safari,Opera 和 IE9+ 非常的小(压缩后

  • vue发送websocket请求和http post请求的实例代码

    先给大家介绍下vue发送websocket请求和http post请求 直接上代码: pdf.vue <script> import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "&quo

  • vue项目中仿element-ui弹框效果的实例代码

    vue项目中仿element-ui弹框效果的实例代码

    最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧.也不分步骤详细介绍了直接上代码. 在组件目录中新建文件夹message 我把message目录里的东西给大家贴出来 message文件夹 src文件夹 index.js import Message from './src/main.js'; export default Message; mian.js import Vue from 'vue'; import Main from './main.vue'; le

  • Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    下面通过一段代码给大家介绍Vue axios全局拦截 get请求.post请求.配置请求,具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"&g

  • vue中keep-alive内置组件缓存的实例代码

    需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期

  • 详解java 中Spring jsonp 跨域请求的实例

    详解java 中Spring jsonp 跨域请求的实例

    详解java 中Spring jsonp 跨域请求的实例 jsonp介绍 JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSO

  • 关于在vue 中使用百度ueEditor编辑器的方法实例代码

    1. 安装  npm i vue-ueditor --save-dev 2.从nodemodels  取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath();  (1)     serverUrl: URL + 'php/controller.php',  这里是你配置的上传内容的

  • vue中使用echarts制作圆环图的实例代码

    vue使用echarts制作圆环图,代码如下所示: <div id="main"></div> <script type="text/ecmascript-6"> export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionD

  • vue项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

随机推荐