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 中请求后台数据的三种方式及一些简单设置。

到此这篇关于Vue请求后台数据的三种方式的文章就介绍到这了,更多相关Vue请求后台数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！