VUE学习13–数据请求

Vue中可以使用fetch、ajax、axios等多种方法进行远程服务器、本地JSON文件等等数据请求。三种方法各有利弊。

  1. Ajax:原生支持,局部更新数据。但可能会产生回调地狱,且浏览器后退功能不能用。
  2. jQuery Ajax:支持jsonp,简单好用。
  3. fetch:默认不带cookie,并且需要使用3rd库ployfill,封装起来比较麻烦(API偏底层)

一、Ajax

Ajax:Asynchronous Javascript And XML(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,可对网页局部更新。Ajax发送请求基于XmlHttpRequest对象(IE7以下是ActiveXObject对象),从服务器获取数据后再在页面上渲染。

同步、异步区别:同步请求必须等待后台响应结束,页面才会进行其他操作,可能会卡死。而异步请求,页面不受服务器响应影响,即使服务器未发回响应,客户端仍然可以做其他操作。

Joe

JS原生Ajax使用步骤比较复杂(创建XmlHttpRequest对象 -> 调用open方法设置基本请求信息 -> 设置发送的数据,发送请求 -> 注册监听的回调函数 -> 拿到返回值,对页面进行更新),因此一般使用jQuery封装后的Ajax操作函数。

  1. $.ajax()。是jQuery封装后的ajax方法。$.get(), $.post()是其简单实现。下面附上$.ajax()简单示例。
  2. Get方法:$.get(URL, callback),其中callback回调函数有data和status两个参数。
  3. Post方法:$.post(URL, data, callback)
$.ajax({
    url:"https://www.iwantacat.net",  //请求的url地址
    dataType:"json",  //返回格式为json
    async:true,  //请求是否异步,默认为异步,这也是ajax重要特性
    data:{"id":"value"},  //参数值
    type:"POST",  //请求方式
    beforeSend:function(){
       //请求前的处理
    },
    success:function(req){
       //请求成功时处理
    },
    complete:function(){
       //请求完成的处理
    },
    error:function(){
       //请求出错处理
    }
});

二、Axios

axios是在VUE项目中用的比较多的一个工具,基于promise

⚠️注意:通常在数据请求时会产生CORS policy跨域问题。解决跨域问题一般有三种方法:在服务端有两种方法:增加JSONP接口;在Access-Control-Allow-Origin设置为*来不限制请求。本地有一种方法:添加反向代理的方法进行数据转发。这里不再赘述。

今天在使用axios通过Get获取一个页面的response时,也遇到了cors问题。通过F12(inspect)在Network中的Request Headers发现Access-Control-Allow-Origin并没有进行限制。同时在下面的请求头中发现有四个项。(X-Client-Info,X-Host,X-Requested-With,X-Token。

服务端ACAO没有进行限制
Inspect获得Request Headers中X series项目

在axios,通过加入X-Client-Info,X-Host两个字段请求服务器,可以尝试绕过服务器的字段限制。因此使用axios的完整写法(带上key:value的字段),就可以成功获取服务器的response。

<script>
import axios from 'axios'
export default {
...
  mounted () {
    // get请求带上header解决跨域
    axios({
      url: 'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=9347823',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1580884372519691043891","bc":"110100"}',
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      console.log(res)
      this.datalist = res.data.data.films
    })
  },
...
带上请求头相关字段后,成功从服务器获取response