axios用于浏览器和node.js中发送ajax请求

一、axios的作用
axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求

二、axios实例
创建axios_pro文件夹
1、复制js资源

vue.min.jsaxios.min.js

2、创建 axios.html
3、引入js

<script src=\"vue.min.js\"></script><script src=\"axios.min.js\"></script>

4、启动课程中心微服务
5、编写js

<script>new Vue({el: \'#app\',data: {teacherList: []},methods: {​getTeacherList(){axios.get(\'http://localhost:8110/admin/edu/teacher/list\').then(response => {console.log(response)this.teacherList = response.data.data.items}).catch(error=>{//失败console.log(error)})}}})</script>

6、html渲染数据

<div id=\"app\"><button @click=\"getTeacherList()\">访问</button>​<table><tr v-for=\"item in teacherList\"><td>{{item.id}}</td><td>{{item.name}}</td></tr></table></div>

7、跨域
为什么会出现跨域问题？

出于浏览器的同源策略限制：
所谓同源（即指在同一个域）就是两个地址具有相同的协议（protocol），主机（host）和端口号（port）
同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能。
解决跨域问题：

@CrossOrigin //解决跨域问题

8、使用生命周期函数
和methods一个级别

created () {this.getTeacherList()},

9、业务分层的简单实现

// 初始化axios设置，返回一个函数引用initRequest () {return axios.create({baseURL: \'http://localhost:8110\', // api 的 base_urltimeout: 5000 // 请求超时时间})},​//api访问模块teacherListApi (){let request = this.initRequest()return request({url: \'/admin/edu/teacher/list\',method: \'get\'})},​//获取讲师列表getTeacherList2() {console.log(\'发送ajax请求2......\')this.teacherListApi().then(response => {console.log(response)var result = response.data //r对象this.teacherList = result.data.items})}