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>