axios安裝及使用

使用npm安裝

$ npm install axios

使用 bower安裝

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

main.js:導入

import axios from 'axios'

  Vue.prototype.$http = axios

  Vue.prototype.$http.defaults.baseURL = '' // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL

 

調用接口使用axios：

1： 接口數據讀取

querygraphic () {
   let _this = this
   this.$http.get('https://localhost:44314/api/Values').then(res => {
    _this.list = res.data
   })

 data () {
  return {
   list: []
  }

調用賦值：v-for="queryg in list":key="queryg.id"  {{ queryg.version }}

2：按id數據讀取

getgrid () {

   this.$http.get('https://localhost:44314/api/Values/' + this.id).then(res => {
    this.gettext = res.data[0]
    console.log(this.gettext)
   })

 data () {
  return {
   id: this.$route.params.id, // 讀取路由傳過來的id
   gettext: {}
  }
 },

調用賦值：
{{ gettext.text }}

3：put更新

this.$http({
        url: 'https://localhost:44314/api/Gj/' + this.id,
        method: 'put',
        contentType: 'application/json;charset=UTF-8',

        data: {
          'id': this.newinfo.id,
          'method': this.newinfo.method,
          'text': this.newinfo.text,
          'type': this.newinfo.type
        },
        dataType: 'json'
      }).then(res => {
        console.log(res)
        if (res.status === 204) {
          this.open1()
          console.log('成功')
        } else {
          this.open4()
          console.log('失敗')
        }
      }).catch(console.error.bind(console)) // 異常

 

4：delete刪除

this.$http.delete('https://localhost:44314/api/Gj/' + row.id).then(res => {
          if (res.status === 204) {
            this.$message({
              type: 'success',
              message: '刪除成功!'
            })
            this.getgjtype('vue') // 重新加載數據
            this.reload() // 刷新頁面
            // location.reload()// 刷新頁面
            // this.$router.go(0)
          } else {
            this.open4()
          }
        }).catch(console.error.bind(console)) // 異常