详解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 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
谈谈JS中的!!
Dec 07 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Python运行DLL文件的方法
2020/01/17 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python从PDF中提取数据的示例
2020/10/30 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
网络方面基础面试题
2012/11/16 面试题
教师自我评价范文
2013/12/16 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
整改落实自查报告
2014/11/05 职场文书
《实心球》教学反思
2016/02/23 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
SQLServer之常用函数总结详解
2021/08/30 SQL Server