【vue 入坑指南 三】vue非同步請求外掛
阿新 • • 發佈：2018-12-15
1 非同步請求外掛 Resource
類似於jquery中的ajax
//在專案根目錄開啟命令視窗安裝
npm install vue-resource --save
//安裝成功後 在package.json中
"dependencies": {
"vue": "^2.5.2",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.1"
},
//get post請求 在package.json同級新建v-resource.html檔案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/vue-resource/dist/vue-resource.js"></script> </head> <body> <div id="app"> <h1>vue-resource 外掛</h1> <a href="javascript:;" v-on:click="get">Get請求</a> <a href="javascript:;" @click="post">Post請求</a> <a href="javascript:;">JsonP請求</a> //跨域請求時使用 <a href="javascript:;" @click="jqAjax">仿$.ajax請求</a> <div> {{msg}} </div> </div> <script> new Vue({ el:"#app", data:{ msg:'', }, http:{ //統一訪問的根目錄地址 root:"http://localhost:63342/vuedemo", }, methods:{ get(){ this.$http.get("package.json",{ params:{ userId:"101", }, headers:{ token:"asdas", } }).then(res=>{ this.msg = res.data; //返回的具體的值在data中 },error=>{ this.msg = error; }); }, post(){ this.$http.post("package.json",{ params:{ userId:"101", }, headers:{ token:"asdas", } }).then(res=>{ this.msg = res.data; //返回的具體的值在data中 },error=>{ this.msg = error; }); }, jqAjax(){ this.$http({ url:"package.json", params:{ userId:"103" }, headers:{ token:"aaaa" }, timeout:5, before:function () { console.log("請求之前執行的函式") } }).then(function (res) { this.msg = res.data; //返回的具體的值在data中 }) } } }) </script> </body> </html>
2.非同步請求外掛 axios
//在專案根目錄開啟命令視窗安裝
npm install axios --save
//get post請求 在package.json同級新建axios.html檔案 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/axios/dist/axios.js"></script> </head> <body> <div id="app"> <h1>axios 外掛</h1> <a href="javascript:;" v-on:click="get">Get請求</a> <a href="javascript:;" @click="post">Post請求</a> <div> {{msg}} </div> </div> <script> new Vue({ el:"#app", data:{ msg:'', }, mounted:function(){ //攔截使用者所有的請求 全域性攔截器 axios.interceptors.request.use(function (config) { console.log("請求初始化的觸發"); return config; }) axios.interceptors.response.use(function (response) { console.log("請求完成後的觸發"); return response; }) }, methods:{ get(){ axios.get("package.json",{ params:{ userId:'999' }, headers:{ token:"tang" } }).then(res=>{ this.msg = res.data; }).catch(function (error) { console.log("erroe"+error); }) }, post(){ axios.post("package.json",{ userId:"123" },{ headers:{ token:"asddd" } }).then(res=>{ this.msg = res.data; }).catch(function (error) { console.log(error); }) }, } }) </script> </body> </html>