vue引入axios
前言:
vue2.0之后,就不再对 vue-resource
更新,而是推荐使用 axios
。基于 Promise
的 HTTP
请求客户端,可同时在浏览器和 Node.js
中使用。
功能特性
1、在浏览器中发送 XMLHttpRequests
请求
2、在 node.js
中发送 http
请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON
数据
8、客户端支持保护安全免受 CSRF/XSRF
攻击
安装方法:
1、安装 axios
npm install axios --save-dev
2、在 main.js
中导入
// 引入axios进行地址访问
import axios from 'axios';
// 不使用use来使用该例,而是用prototype原型来使用
Vue.prototype.$http = axios;
3、配置跨域后端接口请求
//跨域请求
proxyTable: {
'/api': {
// 后端接口地址
target: 'http://127.0.0.1:18080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
配置完成后可直接在 npm run dev
时直接访问后台地址,前缀比真实后台是多了个 /api
4、不配置跨域请求直接使用,在 methods
添加一个方法,代码如下
getMethod (){
//这里是get,同理,其他请求也是一样的
this.$http.get('请求地址').then(res => {
//这里对返回的数据进行处理
})
}
然后 template
中添加一个点击事件去触发时间,就能看到我们的请求了
正文到此结束