目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github的Star已经接近4.5万, 再看看vue-resource
但是作为学习笔记,在学习axios的同时也会对比vue-resource的用法。
先看看同域请求
<div class="container">
<h1>vue request</h1>
<button @click="getJson">GET请求</button>
</div>
methods: {
getJson() {
this.$http.get('/static/api/city.json', {
params: {
userId: '111'
},
headers: {
'token': 'mitu'
}
}).then((res) => {
console.log(res)
}, (err) => {
console.log(err)
})
},
}
请求结果 :
这是vue-resource的get请求方法, city.json存在于同域下的static目录, 注意,首先必须先安装 npm install -S vue-resource 然后在入口文件main.js中注册vue-resource
同理 axios的get请求如下 :
import axios from 'axios'
methods: {
getJson() {
axios.get('/static/api/city.json').then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
}
区别在于 ,
1 .axios无需在main.js中注册,但需要在组件内部引入 import axios from 'axios'
2. vue-resource是绑定到vue实例中,所以调用时应该是 this.$http.get(), 而axios是独立的插件, 调用应该是 axios.get()
跨域请求 :
如直接把
axios.get('/static/api/city.json') 改成请求其他外部域的api如:
axios.get('https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg')
返回结果如下 :
注意到有 No 'Access-Control-Allow-Origin' header, 表示浏览器端限制了跨域的请求。
解决的思路是,先让服务端通过跨域请求,然后客户端(浏览器)再向服务端请求数据,在此服务端起到一个代理的作用 。
1. 找到项目配置文件 config/index.js ,将proxyTable添加以下代码 :
proxyTable: {
'/api': {
target: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
'/api'是供客户端请求的接口 可自定义, 以上两个'/api'必须是一致的。表示客户端请求以 '/api'开头的目标都指向target
target: url ------ 是请求的外域目标api
changeOrigin ----- ture表示开启跨域请求
pathRewrite ---- 对目标资源重定向,可为空值
methods: {
getJson() {
axios.get('/api').then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
},
}
请求数据成功!