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>