>[success] # Vue 的异步请求 axios ~~~ 1.在jq的年代，我们喜欢用ajax做数据的请求响应，在vue的年代我们开始 了'axios'的使用解决数据请求的问题 2.'axios' 是基于es6的promise ~~~ [快速使用的说明文档](https://www.kancloud.cn/yunye/axios/234845) >[danger] ##### 安装 ~~~ 1.npm install axios ~~~ >[info] ## 解决跨域问题 ~~~ 1.前后端分离的开发方式，就会形成跨域问题，跨域问题可以前台解决，也可以 后台实现，本章节只会针对前台的解决方式进行讲解 ~~~ >[danger] ##### 在vue.config.js 配置跨域 ~~~ 1.在'devServer' 配置跨域，配置规则就是，配置的地址是后台接口的host和端口 号，下面案例中配置'http://localhost:3000',是我在本地运行了一个node服务， 端口是3000，我的vue服务虽然也是本地运行，但是端口是8000，因此正好形成 跨域条件，我也将配置指向了接口返回host和端口号 ~~~ ~~~ const path = require('path'); const resolve = dir => path.join(__dirname, dir); const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/'; module.exports = { lintOnSave: false, baseUrl: BASE_URL, // 根据生产还是开发环境配置包 chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) //src 文件可以缩写为@ .set('_c', resolve('src/components')) }, // 打包时不生成.map文件 productionSourceMap: false, devServer: { proxy: 'http://localhost:3000' } }; ~~~ >[danger]##### 案例在home.vue 视图组件中触发数据请求接口 ~~~ 1.在node中的定义的数据格式如下： { code:200, data:{ name:'wang' } } ~~~ ~~~ <template> <div class="home"> <button @click="getInfo()">获取信息</button> </div> </template> <script> import axios from 'axios' export default { methods:{ getInfo(){ axios.get('/person').then( res=>{ console.log(res,) } ) }, } } </script> ~~~