Vue使用axios

使用axios访问API

一、按需引入
1、安装
yarn add axios

2、导入
import axios from ‘axios’

3、使用
  mounted: function () {
    // 按需引入
    axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘按需引入’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

二、全局引入
1、全局引入-结合Vueaxios
1.1安装
yarn add axios vue-axios

1.2入口文件导入
import VueAxios from ‘vue-axios’
import axios from ‘axios’

Vue.use(VueAxios, axios)

1.3使用
  mounted: function () {

    // 全局使用vue-axios
    this.axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘全局引入’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

2、全局引入-使用原型属性(不推荐)
2.1安装
yarn add axios

2.2入口文件导入
import axios from ‘axios’

更改属性
Vue.prototype.$axios = axios

2.3使用
mounted: function () {
    // 全局使用prototype
    this.$axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘全局引入2’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

3、全局引入-结合vuex
3.1安装
yarn add vuex

3.2入口文件引入
import Vuex from ‘vuex’
import axios from ‘axios’

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    num: 1
  },
  actions: {
    // 封装一个 ajax 方法
    test () {
      axios({
        method: ‘get’,
        url: ‘https://localhost:8080/test.json’,
        data: {}
      }).catch(error => { console.log(‘错误提示’, error) })
    }
  }
})

3.3使用
   methods: {
    submitForm: function () {
      console.log(‘被点击’)
      this.$store.dispatch(‘test’)
    }
  }

vuex插件手册
https://vuex.vuejs.org/zh/

Bookmark the permalink.

Comments are closed.