axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

安装

npm install axios --save

在使用的页面调用

import axios from 'axios'

axios模板 输入简写代码提示： sxget 回车

  axios.get(url,params)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err); 
  })

基本使用方法：

axios执行GET请求

image

执行POST请求

image

执行多个并发请求

image

get和post都是基于promise的所以写法上很相似，是用then和catch，使用这种方法来进行发送请求。

实例

<template>
  <div>
    <ul class="iconGroup">
      <li v-for="item of List" :key="item.id">
        <img :src="item.imgUrl" alt="">
        <span>{{item.desc}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Icon',
  data () {
    return {
      List: []
    }
  },
  methods: {
    _iconGroup () {
      axios.get('http://rap2api.taobao.org/app/mock/235146/home')
        .then((res) => {
          this.List = res.data.data.iconLIst
          console.log(res.data.data.iconLIst)
        })
    }
  },
  mounted () {
    this._iconGroup()
  }
}
</script>

<style lang="stylus" scoped>

</style>

image.png

---

组件传值的方法写axios

home.vue主页面

<template>
  <div>
    <home-header :city="city"></home-header>
  </div>
</template>

<script>
import HomeHeader from '@/components/header'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    HomeHeader,
  },
  data () {
    return {
      city: ''
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('http://rap2api.taobao.org/app/mock/235146/home')
        .then((res) => {
          this.city = res.data.data.city
        })
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style>

</style>

header.vue组件页面

<template>
  <div class="headerWrap">
    <div class="city">{{this.city}}</div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    city: String
  }
}
</script>

<style lang="stylus" scoped>

</style>