大多数现代web应用程序使用Ajax来从服务端获取数据。 前后端分离的应用程序,客户端和服务器通过API进行通信。 在通信过程中,服务器端生成的数据通常是JSON格式的数据。在客户端(如浏览器)中,我们可以使用JavaScript将这些JSON格式的数据解析出来,以便在网页上展示。
在Vue中,我们可以使用axios来进行http请求。axios是一个基于Promise的HTTP客户端,用于在浏览器和Node.js中进行请求。 它提供了许多高级功能,例如拦截请求、动态参数等
// 引入axios import axios from 'axios' export default { data () { return { users: [] } }, mounted () { axios.get('http://jsonplaceholder.typicode.com/users') .then(response =>{ this.users = response.data }) .catch(error =>{ console.log(error) }) } }
在上面的例子中,我们使用axios发送了一个GET请求,获取了“http://jsonplaceholder.typicode.com/users”的数据。在回调函数中,我们把response数据里边的user赋值给了Vue组件的data对象中的users属性,则Vue模板中就可以使用类似:{{$data.users}}或者v-for循环来展示请求到的数据。
我们还可以使用Vue提供的axios插件——VueAxios。VueAxios将axios封装到Vue中,使我们能够在Vue的实例中使用其所有功能。下面是VueAxios的基本用法:
// 引入VueAxios import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios) // 使用VueAxios Vue.axios.get('http://jsonplaceholder.typicode.com/users') .then((response) =>{ console.log(response) }) Vue.axios.post('/api/users', {}) .then((response) =>{ console.log(response) })
在上面的例子中,我们使用axios执行了一个GET请求和一个POST请求。在Vue的组件或者实例中,我们可以使用Vue.axios.post或者Vue.axios.get方法来执行http请求。
总之,在Vue中,我们可以使用axios处理HTTP请求和响应。nameVue内置一些函数(prepareRequest、handleResponse),并且可以使用VueAxios将axios封装到Vue中。