vue.js中使用axios数据请求遇到的问题这篇文章帮你妥妥的解决

写在前面的话：
在使用vue环境开发过程中使用axios请求数据接口已经成为了首选，也是vuejs官方推荐的一种方案。这篇文章主要从以下二个方面的实例简单介绍axios的使用，目的是让大家弄明白axios再vue框架下如何使用：
一、直接调用（了解原理和相关设置）
1、使用npm安装axios依赖

cnpm install axios -S

安装完成之后可以在依赖文件package.jason里看到一个依赖

2、在组件里直接导入axios并且做相应的配置

// 第一步:引入Vue 和 axios插件
import axios from 'axios'
// 第二步: 设置服务器地址和端口号
axios.defaults.baseURL = 'http://www.yuyunit.com:8083/'
// 第三步: 设置默认的令牌 token
axios.defaults.headers.common['Authorization'] = ''
// 第四步: 设置请求头格式
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
const url = 'CateringSystem1.0/recruitment/catering/qryMenuClassList.do?method=login'
// 第五步: new 一个参数实例并传参数
let params = new URLSearchParams()
params.append('deskId', sessionStorage.getItem('Did'))
// 第六步: 获取后台返回的数据 .then()
axios.post(url, params).then((data) => {
this.asidearray = data.data.responseBody.menuClassList
})

二、将axios注册成vue的全局插件
1、安装依赖（同上）
2、将axios的方法封装到一个axios.js文件中，并且导出它

import axios from 'axios'

axios.defaults.baseURL = 'http://www.yuyunit.com:8083/'
axios.defaults.headers.common['Authorization'] = ''
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

export default axios

3、在main.js文件中引入axios.js,并且使用vue.prototype.$axios注册成全局插件

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入axios
import axios from './commonjs/axios'

// 注册成为全局插件
Vue.prototype.$axios = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
axios,
components: { App },
template: '<App/>'
})

4、然后在其他的组件中就可以像我们使用其他插件一样，用this.$axios去使用axios去请求数据了

this.$axios.post(urls.login, params).then((data) => {
console.log(data)
}).catch(() => {
alert('请求失败')
})

最后，工作过程中常遇到的报错:TypeError: Cannot read property ‘prototype’ of undefined
解决方案就是使用vue.prototype.axios = axios来注册为全局插件（参考第二步的设置），不要使用vue.use(axios)。因为axios并不是vue的一个插件。