Vue2.0笔记——Ajax，JSONP跨域

Posted 2020-10-31

Ajax实现

vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。
axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。
参考GitHub上的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开源项目

JSONP跨域请求

axios本身并不支持发送跨域的请求，没有提供相应的API。
尽管vue-resource不再维护，但是还可以使用它来进行跨域请求。
您可以考虑使用Jquery.js来进行跨域请求和Ajax请求。然而还有其他使用ajax跨域的更好方法。我们只是说明Vue也可以支持此功能，但如果需要，你任然可以选择。

引入vue-resource.js文件,可以访问Github的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项目

另外，我也不怎么建议使用这个跨域，况且也不是经常用到。
可以使用Jquery，document.domain + iframe跨域以及nodejs中间件代理跨域