Ajax 实现
vue 本身不支持发送 AJAX 请求, 需要使用 vue-resource,axios 等插件实现.
axios 是一个基于 Promise 的 HTTP 请求客户端, 用来发送请求, 也是 vue2.0 官方推荐的, 同时不再对 vue-resource 进行更新和维护.
参考 GitHub 上的 https://github.com/axios/axios ,dist 目录下的文件就是 axios.min.js.
语法:
- axios([options])
- axios.get(url[,options])
传参方式:
1. 通过 url 传参
2. 通过 params 选项传参
案例: axios([options])
- data:{
- id:1001
- },
- methods:{
- sendAjax(){
- axios({
- method:'get',
- url:'https://api.github.com/users/' + vm.id
- }).then(function(resp){ // 表示请求成功, 将执行的回调函数
- console.log(resp.data);
- vm.user=resp.data;
- }).catch(function(){ // 请求失败, 将执行的回调函数
- console.log('请求失败' + resp.status + ',' + resp.statusText);
- });
- }
- }
在这个代码中, github 是一个开源网站, 所以可以访问到用户的信息.
1.vm.id 表示 vm 引用当前 Vue 实例的属性, 在后面 Vue 实例中说明.
2.axios 表示执行 ajax 请求, method 选项表示请求方式, url 表示请求路径.
3..then 回调函数, 表示请求成功将被执行, resp 为请求成功返回的数据.
4.catch 表示请求失败将被执行的回调函数..
axiso.get(url[,options])
与其类似, 但需要注意, 第一个参数为 url, 后面才是选项.
- sendAjaxGet(){
- axios.get('/user',{
- params:{
- id:1001
- }
- }).then(function(resp){
- console.log(resp.data);
- vm.user=resp.data;
- }).catch(function(){
- console.log('请求失败' + resp.status + ',' + resp.statusText);
- });
- }
- axios.post(url,data,[options])
post 方式请求, 第一个参数为请求路径, 第二个参数直接就是需要传递的数据, 格式为 json 格式, 后面的为选项.
- sendAjaxPost(){
- axios.post('server.php',{
- name:'KaiEr',
- age:19
- }).then(function(resp){
- console.log(resp.data);
- }).catch(function(){
- console.log('请求失败' + resp.status + ',' + resp.statusText);
- });
- }
还有其他的 Request Config 请求配置
如: transformRequest
- transformRequest: [function (data, headers) {
- // Do whatever you want to transform the data
- return data;
- }],
按照文档的意思是说, 在请求数据发到服务器之前对其进行更改, 仅适用于'PUT','POST'和'PATCH'.
该值为数组, 数组中最后一个函数应返回一个字符串或 Buffer,ArrayBuffer 实例. 其实返回字符串就可以.
该函数接收的 data 参数表示传递的数据, 即 post 方式请求的第二个参数.
<br/>
还有如
timeout: 表示请求超时的毫秒数
heads: 自定义头部文件
responseType: 响应类型
responseEncoding: 响应编码格式
等等, 都可以在 Github 的 axios 项目的 README.md 文件中查看文档.
GitHub 的 axios 开源项目 https://github.com/axios/axios
JSONP 跨域请求
axios 本身并不支持发送跨域的请求, 没有提供相应的 API.
尽管 vue-resource 不再维护, 但是还可以使用它来进行跨域请求.
您可以考虑使用 Jquery.js 来进行跨域请求和 Ajax 请求. 然而还有其他使用 ajax 跨域的更好方法. 我们只是说明 Vue 也可以支持此功能, 但如果需要, 你任然可以选择.
引入 vue-resource.js 文件, 可以访问 Github 的 vue-resource 项目 https://github.com/pagekit/vue-resource
文档语法:
- this.$http.jsonp('/someUrl', [config]).then(successCallback, errorCallback);
- this.$http.get('/someUrl', [config]).then(successCallback, errorCallback);
- get(url, [config])
- head(url, [config])
- delete(url, [config])
- jsonp(url, [config])
- post(url, [body], [config])
- put(url, [body], [config])
- patch(url, [body], [config])
- Example:
- {
- // GET /someUrl
- this.$http.get('/someUrl').then(response => {
- // get body data
- this.someData = response.body;
- }, response => {
- // error callback
- });
- }
案例:
通过跨域请求 Baidu 的搜索, 打开百度, F12, 输入 a 字符, 搜索, Ajax 请求, network 中找到这样一条请求.
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=1444_12897_21084_26182_22158&req=2&csor=1&cb=jQuery110209410333632536945_1523889174484&_=1523889174489
wd 代表搜索的单词 a, 我们只需要前边的.
另外我们可以在 heads 中看到百度使用的 jsonp 参数名为 cb, 所以需要修改.
- sendJsonp(){
- this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
- params:{
- wd:'a'
- },
- jsonp:'cb' // 百度使用的 jsonp 参数名为 cb, 所以需要修改
- }).then(resp => {
- console.log(resp.data.s);
- });
- }
通过测试, 发现可以得到结果
(10)?["爱奇艺", "阿里云", "安居客", "阿里巴巴", "阿里巴巴批发网", "爱奇艺网", "阿里云邮箱", "安卓模拟器", "爱思助手", "acfun"]
文档访问 Github 的 vue-resource 项目 https://github.com/pagekit/vue-resource
另外, 我也不怎么建议使用这个跨域, 况且也不是经常用到.
可以使用 Jquery,document.domain + iframe 跨域以及 nodejs 中间件代理跨域 https://segmentfault.com/a/1190000011145364
来源: http://www.bubuko.com/infodetail-2565341.html