Vuejs从1.0更新到2.0。官方的HTTP请求已经从推荐vue-resolution变成了axios。接下来，让我们简单地使用axios进行异步请求。(在阅读本文时，作者的默认阅读器能够使用npm命令，并且能够拥有ES6等等。)

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

打开命令窗口：

cnpm安装-g vue-CLI

请稍等，安装就完成了。

然后创建一个新的Vuejs项目

vue init web pack axis project

切换到项目目录并执行命令：

cnpm安装axios -保存-开发

安装项目的最后一个命令依赖于：

cnpm安装

等一下，你能完成它。现在让我们运行用Vue-Cli构建的项目，并执行命令：

Cnpm运行dev自动浏览器自动弹出这个界面，说明我们已经成功实现了上面的步骤。

然后我真的开始使用带有编辑器的axios。打开VS Code(请用你喜欢的，软粉，所以VS Code是首选)，让我们修改main.js入口文件

从“vue”导入Vue从“App”导入。/App ' import axios from ' axios ' vue . prototype . $ http=axios；/* eslint-禁用无新*/新Vue({ el: '#app '，template: 'App/'，components 3360 { App } })

我们引用了axios，然后把axios克隆到Vue的$http属性中，这样以后就可以用axios在其他组件中进行异步请求了。不用说，我们的最终结果是将请求的数据打印到浏览器控制台是成功的。我用的界面是本地模拟的，但是差别不大。这里具体说明一下，跨域需要配置返回的请求头，以下处理在asp.core完成，其他后端配置可以参考；

这是浏览器中的Get接口返回的结果：

好，让我们在Hello.vue组件中编写一些脚本

scriptexport默认值{ name: 'hello '，data () { return { msg: '欢迎使用您的Vue.js App' } }，created:function(){ this。HelloAxios()；}，methods:{ HelloAxios(){ this。$ http . get(' http://localhost :54903/API/values ')。然后(m=console . log(m . data))；} } }/脚本

此时，我们完成了获取请求，然后，我们完成了发布请求

scriptexport默认值{ name: 'hello '，data () { return { msg: '欢迎使用您的Vue.js App' } }，created:function(){ this。HelloAxios()；这个。helloaxiosopst(' helloaxiosopst ')；}，methods:{ HelloAxios(){ this。$ http . get(' http://localhost :54903/API/values ')。然后(m=console . log(m . data))；}，helloaxiosopst(val){ let str=' value=' val this。$ http . post(' http://localhost :54903/API/values '，str)。然后(m=console . log(m . data))；} } }/脚本

结果如图所示，我们传递的值‘helloaxiosopst’也打印出来了。有人可能会问

在这里，我问为什么要这样写。官方文件是这样写的

亲爱的考官，我不能这样写。感兴趣的朋友可以自己测试一下。那我们来谈谈为什么是那根弦

查看chorme F12检查网络请求，发现我们请求的值是表单数据。这样就可以拼接参数请求，多参数的格式为param1=value1param2=value2。

好了，到此为止，这篇文章结束了。希望对大家的学习有帮助，支持我们。