详解Vuejs2.0之异步跨域请求


Posted in Javascript onApril 20, 2017

Vuejs由1.0更新到了2.0版本。HTTP请求官方也从推荐使用Vue-Resoure变为了axios。接下来我们来简单地用axios进行一下异步请求。(阅读本文作者默认读者具有使用npm命令的能力,以及具备ES6的能力,以及等等。。。)

首先我们来安装Vue-Cli开发模板(这个模板可以快速生成vuejs的运行配置环境,可以使新手快速免除配置搭建出运行界面),这里我使用cnpm命令,请自行百度配置。

打开命令窗口:

cnpm install -g vue-cli

详解Vuejs2.0之异步跨域请求

等待片刻,即可安装完毕。

然后新建一个Vuejs项目

vue init webpack axiosproject

详解Vuejs2.0之异步跨域请求

切换到项目目录,执行命令:

cnpm install axios --save --dev

详解Vuejs2.0之异步跨域请求

最后执行命令安装项目所需依赖:

cnpm install

详解Vuejs2.0之异步跨域请求

稍等片刻,即可完成。现在我们来跑一下用Vue-Cli搭建出来的项目,执行命令:

cnpm run dev

自动浏览器自动弹出这个界面就说明上面的步骤我们成功实现了。

详解Vuejs2.0之异步跨域请求

接下来我才来真正的开始用编辑器来使用axios。打开VS Code(编辑器请自行用自己喜欢的,本人软粉,所以首选VS Code),我们来改造一下main.js入口文件

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})

详解Vuejs2.0之异步跨域请求

我们引用了axios,再将axios这个对象clone到Vue的$http这个属性上,以后我们就可以在其他组件里使用axios来进行 异步请求了。不多说了,我们最终的结果就是将请求的数据打印到浏览器控制台就算成功了。我使用的接口是本地模拟的,不过区别不大。这里特别说明一下关于跨域,跨域需要配置返回的请求头,在asp.core做如下处理,其他后端配置可以参照;

详解Vuejs2.0之异步跨域请求

这是Get接口返回在浏览器返回结果:

详解Vuejs2.0之异步跨域请求

好,接下来我们在Hello.vue这个组件里写一些脚本

<script>
export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 }
 },
 created:function(){
 this.HelloAxios();
 },
 methods:{
 HelloAxios(){
  this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data));
 }
 }
}
</script>

详解Vuejs2.0之异步跨域请求

至此我们完成了Get请求,接下来,我们完成Post请求

<script>
export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 }
 },
 created:function(){
 this.HelloAxios();
 this.HelloAxiosPost('HelloAxiosPost');
 },
 methods:{
 HelloAxios(){
  this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data));
 },
 HelloAxiosPost(val){
  let str = 'value='+val
  this.$http.post('http://localhost:54903/api/values',str).then(m=>console.log(m.data));
 }
 }
}
</script>

详解Vuejs2.0之异步跨域请求

结果如图,我们传的值'HelloAxiosPost'也打印出来了。有人可能会问

 详解Vuejs2.0之异步跨域请求

这里问什么要这么写,官方文档是这么写的

详解Vuejs2.0之异步跨域请求

亲测这样写不行。有兴趣的朋友可以自行测试。那我们再来说说为何是那个字符串

详解Vuejs2.0之异步跨域请求

查看chorme F12查看一下网络请求,发现我们请求的值就是Form Data。这样我们就可以拼接参数请求了,多参数格式为param1=value1¶m2=value2。

好了,至此本文结束了,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 #Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 #Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 #Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 #Javascript
基于JavaScript实现活动倒计时效果
Apr 20 #Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 #Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
Yii全局函数用法示例
2017/01/22 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
python框架django项目部署相关知识详解
2019/11/04 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
写好自荐信的技巧
2013/11/08 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
小班幼儿评语大全
2014/04/30 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2014年党务工作总结
2014/11/25 职场文书
信用卡收入证明范本
2015/06/12 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
oracle数据库去除重复数据
2022/05/20 Oracle