axios模擬GET請求例項及詳解

愛特李斯特發表於2018-07-27
1、在my-project專案中引入axios依賴:cnpm install --save axios

2、main.js 中引入 axios:
    // 在 main.js 中新增了這兩行程式碼之後,就能直接在元件的 methods 中使用 $http命令
    import axios from 'axios'
    Vue.prototype.$http = axios
   (將 axios 改寫為 Vue 的原型屬性,只加第一條,有時候無法在其它的元件中使用 axios)

3、App.vue檔案內容如下,當然你也可以在別的元件中呼叫
    <template>
        <div id="app">
            <img src="./assets/logo.png">
            {{ msg }}
            2、寫一個按鈕觸發函式調起介面
            <a href="javascript:" v-on:click="get()">GET按鈕</a>

         </div>
   </template>

<script>
  // 1、使用import匯入axios,一定不要忘了先匯入axios
  import axios from 'axios'

  export default {
      name: 'App',
  

      data () {
          return {
              title: '我去!!!',
              msg:'',
              apiurl: 'http://api/baidu.com/storage/?room=1'
          }
      },

       methods: {
          get: function() {
              axios.get("http://api/baidu.com/txcjapi/storage/", {
                  params: { room: '1'}
              }).then(res => {
                  this.msg = res.data
              })
              .catch((error) => {
                  this.msg = error
              })
       },

 }
</script>

<style>

</style>

    
    
    

 

相關文章