Axios與json

什麼是json？

• JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
• JSON 是輕量級的文本資料交換格式
• JSON 獨立于語言 *
• JSON 具有自我描述性，更易了解
• *JSON 使用 JavaScript 文法來描述資料對象，但是 JSON 仍然獨立于語言和平台。JSON 解析器和 JSON 庫支援許多不同的程式設計語言。
• http
• 前背景互動
• 接口的概念

<template>
  <div id="app">

    <div v-for="item in list" :key="item.id">
      {{item.name}}
    </div>
  </div>
</template>

<script>
import aaa from './aaa'
export default {
  name: 'App',
  components: {
  },
  data () {
      return {
          list: {}
      }
  },
  created() {
      // TODO

      this.list = aaa.data
  }
}
</script>
           

什麼是axios？

• axios 是一個基于 promise 的 HTTP 庫，在浏覽器和 node.js 中使用。
• axios主要是用于向背景發起請求的，還有在請求中做更多是可控功能。

使用axios？

• cnpm install  axios --save
• main.js

1. import axios from 'axios’
2. Vue.prototype.$axios = axios

created() {
    var _this = this
    this.$axios.get('http://115.29.141.32:8084/api/mall/getGoodsByType?typeId=-1')
        .then(res => {
            console.log(res)
            _this.obj = res.data.data
        })
        .catch(error =>{
            console.log(error)
        })
}
           

<template>
    <div>
      <div v-for="item in obj" :key="item.id">
          <img :src="item.img">
      </div>
    </div>
</template>

<script>
export default {
    name: "App2",
    data () {
        return {
            obj: ''
        }
    },
    created() {
        var _this = this
        this.$axios.get('http://115.29.141.32:8084/api/mall/getGoodsByType?typeId=-1')
            .then(res => {
                console.log(res)
                _this.obj = res.data.data
            })
            .catch(error =>{
                console.log(error)
            })
    }
}
</script>