前端请求数据的几种方法

前端调用后端接口获取数据的几种常用方法

原生Ajax

这是最为古老的一种，自ajax方案提出之后就存在的

• get请求：

  // 创建一个xhr对象
  var xhr = new XMLHttpRequest()
  
  // 建立连接
  xhr.open('get', 'http://39.98.122.169:8888/tags/hot/4')
  
  // 提交发送
  xhr.send()
  
  // 接收返回数据
  xhr.onload = function () {
    console.log(JSON.parse(xhr.response))
  }

  通常还有一步监听请求状态和状态码的，如果这样的话是：

  // get请求
  var xhr = new XMLHttpRequest();
  
  xhr.open('GET', '/api/user?id=333', true);
  xhr.send();
  
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log(JSON.parse(xhr.response))
    }
  }

• post

  let obj = {
    page: 1,
    pageSize: 10,
    year: 2021,
    month: 2
  }
  var xhr = new XMLHttpRequest()
  
  xhr.open('post', 'http://39.98.122.169:8888/articles')
  
  xhr.setRequestHeader('Content-Type', 'application/json')
  
  xhr.send(JSON.stringify(obj))
  
  xhr.onload = () => {
    console.log(JSON.parse(xhr.response))
  }
  
  // 或者这样
  // xhr.onreadystatechange = function (e) {
  //   if (xhr.readyState == 4 && xhr.status == 200) {
  //     console.log(JSON.parse(xhr.response))
  //   }
  // }

基于原生的JQuery Ajax封装

大多数人最开始学习ajax的时候都是直接上手jQuery的ajax。但是，这也仅仅是对原生ajax的封装

• get

  $.ajax({
    url: 'http://39.98.122.169:8888/tags/hot/4',
    type: 'GET',
    success: res => {
        console.log(res);
    },
    error: (xhr, statusCode, err) => {
        console.log(err);
    }
  });

• post

  let jsonData = {
    page: 1,
    pageSize: 10,
    year: 2021,
    month: 2
  };
  $.ajax({
    url: 'http://39.98.122.169:8888/articles',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json;charset=utf-8',
    data: JSON.stringify(jsonData),
    success: res => {
        console.log(res);
    },
    error: (xhr, statusCode, err) => {
        console.log(err);
    }
  });

原生fetch

fetch其实是原生ajax的一种promise封装，用.then()这种友好的方式得到下一个promise从而返回数据，最重要的是这居然是原生js的api！

• get

  fetch(`http://39.98.122.169:8888/tags/hot/4`, {
    method: 'GET'
  })
    .then( response => response.json() )
    .then( result => result.data )
    .then( data => console.log(data) )

• post

  let obj = {
    page: 1,
    pageSize: 10,
    year: 2021,
    month: 2
  }
  fetch(`http://39.98.122.169:8888/articles`, {
    method: 'POST',
    body: JSON.stringify(obj),
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then( response => response.json() )
    .then( result => result.data )
    .then( data => console.log(data) )

这确实好多了

axios

使用vue时的请求数据好伙伴，但是有多少人知道其实它也只是原生ajax的promise封装呢？

• get

  const { data: res } = await this.$http.post(`articles/hot/2`)
  console.log(res)

• post

  let body = {
    page: 1,
    pageSize: 10,
    year: 2021,
    month: 2
  }
  const { data: res } = await this.$http.post(`articles`, body)
  console.log(res)
  
  // 要是想加上请求头的话
  // var config = {
  //   headers: {
  //     'Content-Type': 'application/json;charset=utf-8'
  //   }
  // }
  // const { data: res } = await this.$http.post(`articles`, body, config)

简洁性一目了然