CLI –异步axios
最后更新于：2022-04-02 08:10:04
>[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'
}
}
~~~
~~~
~~~
';