【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版本中经常被使用，后续不在更新；