【Vue】接口调用方式

前言

目标
1 接口调用方式有哪些
2 如何调用接口

---

一、xhr

xhr是一个小巧的JavaScript库，它对原生的XMLHttpRequest进行了封装，使你在浏览器环境下能够更方便地发送HTTP请求。与流行的request库兼容，xhr为Node.js和浏览器环境提供了一致的API体验。
使用xhr发起Get请求步骤
1 创建xhr对象
2 调用xhr.open()函数
3 调用xhr.send()函数
4 监听xhr.onreadystatechange事件

  //创建一个实现ajax
  function ajax(url) {
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText); // 在控制台中打印响应文本
      }
    };
    xhr.send();
  }
  ajax('http://localhost:5500/server/config')

js原生ajax发起的请求xhr

二、jquery

jquery中的接口调用基于xhr开发，是DOM操作

1.安装jquery

npm install jquery

2.引入jquery

import $ from ‘jquery’
Vue.prototype.$ = $

3.使用

get请求

this.$.get('http://localhost:5500/server/config',(res)=>{
    console.log('res',res)
})

Vue中如何使用jQuery

三、axios

axios底层原理也是基于xhr的，减少了DOM操作。Vue框架设计的其中一个目的就是为了减少DOM的操作，axios是Vue项目比较推荐使用的接口调用方式

1.安装

npm install axios

2.引入

import axios from ‘axios’
Vue.prototype.axios = axios

3.使用

get请求

    this.axios({
      method: "get",
      url: "http://localhost:5500/server/config",
    })
      .then(function (res) {
        console.log(res.data);
      })
      .catch(function (err) {
        console.log(err);
      });

四、fetch

fetch与xhr平级，但是fetch中有两次promise操作且兼容性比较，不推荐使用

fetch('http://localhost:5500/server/config', {
  method: 'GET',
})
.then(response => response.json())
.then(data => console.log(data))

五、vue-resource

vue-resource在Vue1.x版本的时候经常被使用，从Vue2.x开始以后基本不使用了，vue-resource的更新维护也已经停止，在开发时不建议使用，了解即可。

1.安装

npm install vue-resource

2.引入

import VueResource from “vue-resource”
// vue.use(插件) VM中会添加 $http
Vue.use(VueResource)

3.使用

get请求

    this.$http.get("http://localhost:5500/server/config").then(
      function (res) {
        //成功的回调函数
        console.log(res.data);
      },
      function (rep) {
        //失败的回调函数
        alert(rep);
      }
    );

---

总结

1、xhr是js封装的一个库；
2、jquery基于xhr，接口调用$.get $.post是DOM操作；
3、axios基于xhr，减少DOM操作，推荐使用 ；
4、fetch是js封装的，与xhr平级。两次promise操作、兼容性比较差；
5、vue-resource，Vue提供的在vue1.x版本中经常被使用，后续不在更新；