Vue.js 2.0 使用 axios 进行 AJAX 请求教程

"Vue.js与Ajax(axios)的结合使用" Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。在Vue.js 2.0版本中，官方推荐使用axios库来进行Ajax（异步JavaScript和XML）请求。Axios是一个基于Promise的HTTP客户端，支持在浏览器和Node.js环境中工作。它具有许多优点，如支持浏览器的自动转换JSON响应数据、请求和响应拦截器、取消请求等功能。 使用axios进行Ajax请求非常直观。例如，要从服务器获取JSON数据，可以创建一个新的Vue实例，并在`mounted`生命周期钩子中调用axios的`get`方法。以下是一个简单的GET请求示例： ```html <template> <div> <ul> <li v-for="site in info" :key="site.id">{{ site.name }}</li> </ul> </div> </template> <script> import axios from 'axios'; export default { el: '#app', data() { return { info: null }; }, mounted() { axios .get('https://www.mscto.com/try/ajax/json_demo.json') .then(response => (this.info = response.data.sites)) .catch(error => console.log(error)); } }; </script> ``` 在这个例子中，我们首先导入axios，然后在Vue组件的`data`对象中定义一个`info`属性，用于存储从服务器获取的数据。当组件挂载后，axios的`get`方法会被调用，请求指定URL的JSON数据。成功响应时，我们将数据赋值给`info`，并在模板中通过`v-for`指令遍历并显示数据。 对于GET请求，参数可以通过两种方式传递。一种是直接在URL后面添加查询参数，如`axios.get('/user?ID=12345')`；另一种是通过`params`对象，如`axios.get('/user', { params: { ID: 12345 } })`。 POST请求同样简单，如下所示： ```javascript mounted() { axios .post('https://www.mscto.com/try/ajax/demo_axios_post.php', { data: { key1: 'value1', key2: 'value2' } }) .then(response => (this.info = response)) .catch(error => console.log(error)); } ``` POST请求的参数通常放在第二个参数中，作为一个包含待发送数据的对象。axios会自动处理JSON序列化。 Vue.js结合axios提供了一种高效且易于使用的解决方案，用于在单页应用中与服务器进行数据交互。通过Promise API，可以方便地处理异步操作，使代码更加清晰和易于维护。同时，axios还提供了丰富的配置选项和错误处理机制，满足各种复杂的网络请求需求。