云应用开发类企业案例14.Vue.jsAjax(axios)14Vue.jsAjax(axios).docxVIP

PAGE1 / NUMPAGES17 Vue.js Ajax(axios) Vue.js Ajax(axios) Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Github开源地址： /axios/axios 安装方法 使用 cdn: script src=/axios/dist/axios.min.js/script 或 script src=/axios/0.18.0/axios.min.js/script 使用 npm: $ npm install axios 使用 bower: $ bower install axios 使用 yarn: $ yarn add axios 浏览器支持情况 GET 方法 我们可以简单的读取 JSON 数据： GET 实例 new Vue({ el: #app, data () { return { info: null } }, mounted () { axios .get(/try/ajax/json_demo.json) .then(response = ( = response)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) 使用 response.data 读取 JSON 数据： GET 实例 div id=app h1网站列表/h1 div v-for=site in info {{ }} /div /div script type = text/javascript new Vue({ el: #app, data () { return { info: null } }, mounted () { axios .get(/try/ajax/json_demo.json) .then(response = ( = response.data.sites)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) /script GET 方法传递参数格式如下： 传递参数说明 // 直接在 URL 上添加参数 ID=12345 axios.get(/user?ID=12345) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 设置参数： axios.get(/user, { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); POST 方法 POST 实例 new Vue({ el: #app, data () { return { info: null } }, mounted () { axios .post(/try/ajax/demo_axios_post.php) .then(response = ( = response)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }) POST 方法传递参数格式如下： 传递参数说明 axios.post(/user, { firstName: Fred, // 参数 firstName lastName: Flintstone // 参数 lastName }) .then(function (response) { console.log(response); }) .catch(function (error) {