需要在vue组件中使用axios向后台获取数据应该怎么办？
现在我们通过webpack+vue-cli搭建起了一个vue项目的框架，如果我们需要在vue中使用axios向后台获取数据应该怎么办呢？
通常情况下，我们搭建好的项目目录应该是这样子的
首先需要安装axios，这个会npm的都知道
下一步，在main.js中引入axios
import axios from &axios&;
与很多第三方模块不同的是，axios不能使用use方法，转而应该进行如下操作
Vue.prototype.$axios =
接着，我们就可以在App.vue中使用axios了
created:function(){
this.$axios.get(&/seller&,{&id&:123}).then(res=&{
console.log(res.data);使用vue,axios开发下的跨域设置(状态码200,返回数据了,但是浏览器拦截并报错)
本人菜鸟学徒一只,几天遇到了用vue,axios写项目时的坑,在请求数据接口的时候,明明用get方式请求成功,json数据也返回到后台了,偏偏控制台报错,提示'Access-Control-Allow-Origin'';网上找了一个天,各种方法都试过,都不奏效,凌晨终于找到了解决方法:import Axios from 'axios'; // 引入axios
Vue.prototype.$ajax = A //挂载axios插件的方法
import Axios from 'axios'; // 引入axios
Vue.prototype.$ajax = A //挂载axios插件的方法
我的webpack配置文件是webpack.config.js,在配置中添加:proxy: {
target: '要访问的API域名(如:http://v.juhe.cn/toutiao/index)',
changeOrigin: true,
pathRewrite: {'^/api': ''}
然后在需要访问API的vue文件中这样写// get 请求
this.$ajax.get('/api' + url)
// url格式,如:?type=xxx&key=value
.then(res =& {
console.log(res);
.catch(err =& {
console.log(err);
// post 请求
this.$ajax.post('/api' + url,{
headers: {'Access-Control-Allow-Origin': '*'}
.then(res =& {
console.log(res);
.catch(err =& {
console.log(err);
成功返回数据:{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}config:{adapter: ?, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}data:{reason: "成功的返回", result: {…}, error_code: 0}headers:{date: "Fri, 06 Apr :31 GMT", etag: "3af2b8bbb189b4c22cd9a06e6edd0255", connection: "close", x-powered-by: "Express", transfer-encoding: "chunked", …}request:XMLHttpRequest {onreadystatechange: ?, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}status:200statusText:"OK"__proto__:Object希望能给遇到和我一样问题小伙伴们一点帮助,文笔粗陋,谅解!
vue.js使用axios实现跨域请求
jsonp跨域问题【主要解决的是返回状态码是200，但是js脚本仍然是执行error模块问题】
vue 使用axios 出现跨域请求的两种解决方法
前Vue，后Express的'Access-Control-Allow-Origin'问题
vue2.0下axios实现跨域踩的坑
使用axios等引起的跨域问题，及跨域auth
vue项目中，使用axios跨域处理
关于vue项目中，axios请求方式，跨域请求的处理
axios 详细使用方法 及跨域请求（反向代理）的处理
Vue小模块之用户登录功能（六）使用axios解决‘Access-Control-Allow-Origin’跨域
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
在html中用axios返回的数据，渲染dom
&div class="top"&
&div v-for="item of content.content" class="dpw"&
&img :src="item.url" alt="item.text" class="pw"&
&span class="jj"&{{item.ctitle}}&/span&
&p&{{item.name}}&/p&
想操作渲染的dom，但是貌似不行this.nextTick()也不行，还是我用错了？
import jQuery from 'jquery'
export default {
content:[]
methods : {
this.$nextTick(function () {
jQuery(".jj").hide();
jQuery(".top & div").hover(function(){
jQuery(".jj",this).slideToggle(500);
jQuery("img",this).animate({
opacity: 0.1
},1,function(){
jQuery(".top & div").mouseleave(function(){
jQuery("img",this).animate({
opacity: 1
getData () {
this.$http({
url: `http://192.168.1.108:3000${this.$route.path}`,
method: 'get'
}).then((res) =& {
this.content = res.
}).catch((res) =& {
console.log('error:', res)
beforeRouteUpdate(to, from, next) {
this.$http({
url: `http://localhost:2000/getjson${to.path}`,
method: 'get',
}).then((res) =& {
this.content = res.
}).catch((res) =& {
console.log('error: ', res);
mounted() {
this.show();
this.getData();
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
放在getData请求成功后就可以了
getData () {
this.$http({
url: `http://192.168.1.108:3000${this.$route.path}`,
method: 'get'
}).then((res) =& {
this.content = res.
// 建议把nextTick写show方法外面
this.$nextTick(this.show)
}).catch((res) =& {
console.log('error:', res)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
为什么要操作dom？看你代码都是操作dom的动画，不要用jq写动画了，太卡，你把动画都写在css3里面，然后vue来操作class，class负责动画的开关
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。当前位置：
(vue.js)vue组件中数据是通过axios返回的，但是没等axios返回就渲染了，这个怎么解决？
猜你喜欢的文章
(vue.js)vue组件中数据是通过axios返回的，但是没等axios返回就渲染了，这个怎么解决？
来源：网络整理&&&&&时间: 0:23:12&&&&&关键词:
关于网友提出的“ (vue.js)vue组件中数据是通过axios返回的，但是没等axios返回就渲染了，这个怎么解决？
”问题疑问，本网通过在网上对“ (vue.js)vue组件中数据是通过axios返回的，但是没等axios返回就渲染了，这个怎么解决？
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：
问题： (vue.js)vue组件中数据是通过axios返回的，但是没等axios返回就渲染了，这个怎么解决？
描述:&template&
&!--这里如果axios还没有返回数据那么就报name undefined，这个怎么解决？？？--&
&mycomponent :mydata="thisdata.name"/&
&/template&
export default{
thisdata:null
getThisData(){
let that =
axios.get('')
.then(function(res){
that.thisdata = res.
components:{
mycomponent
&/script&解决方案1:加个 v-if 就可以了&mycomponent :mydata="thisdata.name" v-if="thisdata.name"/&解决方案2:undefined是因为你没有初始化啊，你在data中初始化下它就行了export default{
thisdata:{
}解决方案3:&mycomponent :mydata="thisdata&&thisdata.name"/&这么做就不会报错了， getThisData(){
let that =//可以不用that
axios.get('')
.then(function(res){
that.thisdata = res.
}直接用箭头函数： getThisData(){
axios.get('')
.then((res)=&{
this.thisdata = res.
以上介绍了“ (vue.js)vue组件中数据是通过axios返回的，但是没等axios返回就渲染了，这个怎么解决？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：http://www.codes51.com/itwd/4278422.html
上一篇： 下一篇：既然官方已经说了不在维护vue-resource，那我们就看看axios是怎么使用的..........
1)get方法的使用
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&axios的初步使用&/title&
&script src="../lib/vue.js"&&/script&
&script src="../lib/axios.min.js"&&/script&
&div id="app"&
&my-f1&&/my-f1&
const c1={
template:`
&div v-if="userList.length"&
&li v-for="item in userList"&{{item.id}}&/li&
userList:['fd','rr','tt'],
mounted(){
this.getList();
computed:{
return this.usersL
getList(){
const self=this;
axios.get('../data/a1.php',{params:{
id:<span style="color: #
}}).then(function(res){
self.userList=res.
}).catch(function(res){
console.log(res);
const myVue = new Vue({
el:'#app',
components:{
header("Content-Type:application/charset=UTF8");
new PDO('mysql:host=127.0.0.1;dbname=port=3307','root','');
$id=$_GET['id'];
$fname=$_POST['firstname'];
// $lname=$_POST['lastname'];
// $body = @file_get_contents('php://input');
if($myDB){
$res= $myDB-&query("select * from stu");
while($row = $res-&fetch( PDO::FETCH_ASSOC)){
// print_r($row);
die("fali");
// json_encode($arr);
print_r( json_encode($arr));
以上很简单的一个例子。。。。
我们注意一下请求头的content-type
2）使用post请求
axios.post当你使用post请求的时候，好像会有一点问题。。。。。
axios.post('../data/a1.php', {//后端就不能使用$_post['']接受参数了，后端要接受请求主体
name:'士大夫', age:<span style="color: # }) .then(function(res){ self.userList=res. }) .catch(function(res){ console.log(res); });
$fname=$_POST['name'];
好像获取不到请求传递的值......
但是办法还是有的，这个时候我们可以在后端（这里使用的是php）,来获取整个请求主体....
$body = @file_get_contents('php://input');
但还是很奇怪，为啥？？？？
看看官方的解释.................
然后我就试试....
getList(){
const self=this;
//这里我们不修改请求头，而是修改 userService(手动将post请求参数变为get请求形式,后端可以使用$_POST['参数名'],接受参数)
let param = new URLSearchParams();
param.append("firstname", "Fred");
param.append("lastname", "Flintstone");
axios.post('../data/a1.php',param)
.then(function(res){
self.userList=res.
.catch(function(res){
console.log(res);
php接受参数；（很明显我前端做了参数处理）
$fname=$_POST['firstname'];
很明显的发现我们现在的请求方式变为：
进一步拓展：
我在php文件中做了一个延时处理。
$conn=mysqli_connect('<span style="color: #7.0.0.1','root','','axiox',<span style="color: #07);
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);
// $body = @file_get_contents('php://input');
//$body=json_decode($body)
//$id=$body-&
// $id=$_POST['id'];
$id=$_GET['id'];
$sql="SELECT * FROM tea WHERE id=$id";
$result=mysqli_query($conn,$sql);
$list=mysqli_fetch_assoc($result);
echo json_encode($arr);
// print_r( json_encode($res));
// header("Content-Type:application/charset=UTF8");
// header("Content-Type:application/x-www-form-charset=UTF8");
new PDO('mysql:host=127.0.0.1;dbname=port=3307','root','');
//$id=$_GET['id'];
$lname=$_POST['lastname'];
//$body = @file_get_contents('php://input');
//$fname=$_POST['firstname'];
if($myDB){
$res= $myDB-&query("select * from stu");
while($row = $res-&fetch( PDO::FETCH_ASSOC)){
// print_r($row);
die("fali");
print_r( json_encode($arr));
我本以为在js里面axios.all的两个请求都执行问之后才执行&console.log("all request finished");
但是结果不是，而是先输出了这句话，，，，，毁三观
5）axios.create的使用，主要用于自定义请求配置。
详情看文档，，，，，
&6）拦截器的使用（主要用于在请求等待时候做一些优化处理）
基本语法：axios.interceptors.request.use(function (config) {
// Do something before request is sent
console.log("请求之前");
return//这句话不能丢
}, function (error) {
// Do something with request error
console.log("对错误deal");
return Promise.reject(error);
创建一个组件
const c1={
template:`
&p&this is a
&td&id&/td&
&td&name&/td&
&td&salary&/td&
&td&address&/td&
&td&{{tea.id}}&/td&
&td&{{tea.name}}&/td&
&td&{{tea.salary}}&/td&
&td&{{tea.address}}&/td&
id:<span style="color: #,
name:'eee',
salary:<span style="color: #33,
address:'中国天安门'
getList(){
const self=this;
self.createInter();
axios.get('../data/a4.php',{///a4.php做了延时处理
id:<span style="color: #
}).then(function(res){
self.tea=res.data[<span style="color: #];
},function(err){
console.log(err);
createInter(){
const interOne=axios.interceptors.request.use(function (config) {
// Do something before request is sent
console.log("请求之前");
}, function (error) {
// Do something with request error
console.log("对错误deal");
return Promise.reject(error);
const interTwn= axios.interceptors.response.use(function (response) {
// Do something with response data
axios.interceptors.request.eject(interOne);//取消一个拦截器
console.log("this is after");
}, function (error) {
// Do something with response error
return Promise.reject(error);
mounted(){
this.getList();
const myVue=new Vue({
el:'#app',
components:{
实际效果如下：（可以看到在一定的时间延迟之后会输出‘this is after’,并且也请求到了后端数据......）
阅读(...) 评论()