详解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 相关文章推荐
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 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
PHP 字符串 小常识
2009/06/05 PHP
PHP 组件化编程技巧
2009/06/06 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python删除过期文件的方法
2015/05/29 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
深入理解Python3 内置函数大全
2017/11/23 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
计算机网络专业推荐信
2013/11/24 职场文书
建材业务员岗位职责
2013/12/08 职场文书
上班玩手机检讨书
2014/02/17 职场文书
2014年度个人工作总结
2014/11/07 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android