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/