使用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/
