vue 请求后台数据的三种方式

---

前言

本文主要介绍了在 vue 中，如何向后台如何发送请求获取数据的三种方法

---

一、Ajax

1.什么是Ajax

Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是一种异步无刷新技术。

2.使用 $ajax 来发送请求

在 vue 中，我们使用 jQuery 中的 ajax 方法来请求后台的数据。既然，我们需要使用 jQuery 中的 ajax 方法来发送请求，首先就应该在 vue 项目中安装 jQuery

npm i jquery

ajax 方法的具体语法如下：

$.ajax({
  url : "请求地址",
  type : "请求类型",
  async : "是否异步",
  data : "要传递给服务器的数据",
  success : function(data){
    // 服务器返回数据时调用回调函数，data 是服务器返回的数据
  }
})

二、Fetch

1.什么是 Fetch

Fetch 现代浏览器提供的一个基于 promise 的请求资源的 api，Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。

2.使用 Fetch 向后台发送请求

一个基本的 fetch 请求设置起来其实很简单，代码如下：

fetch('请求地址')
  .then(res=>res.json())
  .then(res=>{
  // 服务器返回数据时调用回调函数，res 是服务器返回的数据
})

以下是使用 fetch() post 上传 json数据的例子：

fetch(url, {
  method: 'POST', // 请求方法还可以是 put
  body: JSON.stringify(data), // 数据可以以字符串或则对象的形式
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
  .then(response => {
  // 服务器返回数据时调用回调函数，response 是服务器返回的数据
});

三、axios

1.什么是 axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本

2.使用 axios 向后台发送请求

同样的，在使用 axios 向后台发送请求之前，首先需要在 vue 项目中安装 axios:

npm i axios

axios 请求代码如下：

axios.get('请求地址')
     .then((res)=>{
     // 服务器返回数据时调用回调函数，res 是服务器返回的数据
})

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 vue 中请求后台数据的三种方式及一些简单设置。