vue中使用ajax vue中使用ajax请求

先学ajax还是vue

答案是先学vue。

因为vue是也给框架结构知识，vue里面不仅仅有前端的知识点，还包含有用ajax封装的axios组件。

也就是你学会了使用vue技术知识，那么ajax技术你也会随之学会了，即使学不会ajax，但是也会对其有所了解，掌握一些基本原理，再进行深入学习就比较简单了。

vue怎么调用接口

Vue.js是一个前端MVVM框架，通常需要使用Ajax技术来向服务器请求和获取数据，这涉及到调用接口。

以下是Vue.js调用接口的步骤：

1. 安装axios

在项目中使用axios库进行AJAX请求，需要先安装axios 。可以使用npm或yarn进行安装：

```

npm install axios

```

```

yarn add axios

```

2. 调用接口

可以在Vue组件的methods中定义请求接口的函数，使用axios库发送AJAX请求，如下所示：

```

methods: {

getUserInfo () {

//发送请求获取用户信息

axios.get('/api/userinfo').then((response) => {

//处理请求返回结果

console.log(response);

}).catch((error) => {

console.log(error);

})

}

}

```

3. 处理返回结果

当接口请求成功时，axios会返回一个Promise对象，我们可以使用Promise对象的then()方法处理请求的返回结果。如果出现错误，会返回一个失败的Promise，我们可以使用catch()方法处理错误。

在Vue组件中可以使用响应式的数据来渲染组件视图，例如：

```

data () {

return {

userInfo: {}

}

},

methods: {

getUserInfo () {

axios.get('/api/userinfo').then((response) => {

this.userInfo = response.data;

}).catch((error) => {

console.log(error);

})

}

}

```

这样就可以在响应成功时将接口的结果赋值给userInfo，在模板中使用userInfo的数据来动态渲染页面。

以上是Vue.js调用接口的基本步骤，代码示例中只是一个简单的示例，实际上还有很多需要考虑的因素，如接口的请求方式、接口的参数传递、接口的数据格式等，需要根据实际情况进行调整。

最简单的一种方法

 安装axios,npm install --save axios

 在main.js中引入

import axios from '.axios'

Vue.prototype.$axios=axios ①

//如果Vue.prototype.$ajax=axios ，调用时写法如下②

在想要调用接口数据的页面中,get后面的地址是你的接口地址