>[success] # Vue 的異步請求 axios ~~~ 1.在jq的年代，我們喜歡用ajax做數據的請求響應，在vue的年代我們開始 了'axios'的使用解決數據請求的問題 2.'axios' 是基于es6的promise ~~~ [快速使用的說明文檔](http://www.hmoore.net/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> ~~~