1.安装axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
在编译器的的终端控制台上输入
npm install axios --save
或
cnpm install axios --save
或者通过CDN直接在文件中引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.使用axios请求数据
在脚手架项目中的main.js中头部引入axios
import axios from 'axios'
并将其注册为全局变量
Vue.prototype.$axios = axios
在需要使用的场合通过GET和POST方式请求数据
this.$axios.get('url')
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
})
this.$axios.post('url')
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
})
3.跨域请求
如果请求的数据来自其他服务器，需要跨域请求，需要声明代理来解决问题
vue脚手架3.0版本取消了config文件夹，需要自己在工程根目录新建vue.config.js来进行配置
vue.config.js在编译时会被脚手架自动加载
如果是element-ui项目，在webpack.config.js文件中的devServer模块中添加，方式与下面的操作一致
声明vue.config.js
在其中配置根节点
module.exports = {
}
在根节点中追加代理设置
devServer: {
proxy: {
'abc': {
target: 'url', //第一个跨域网站根路径
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/abc": "/" // 这里理解成用‘/abc’代替target里面的地址，后面组件中我们掉接口时直接用abc代替
}
},
'xyz'{
target: 'url', //第二个跨域网站根路径
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/abc": "/" // 这里理解成用‘/abc’代替target里面的地址，后面组件中我们掉接口时直接用abc代替
}
}
}
}
