怎么在vue中利用axios实现数据交互

本篇文章给大家分享的是有关怎么在vue中利用axios实现数据交互，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

为丰宁等地区用户提供了全套网页设计制作服务，及丰宁网站建设行业解决方案。主营业务为成都做网站、成都网站制作、丰宁网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

1. 通过axios实现数据请求

vue.js默认没有提供ajax功能的。

所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。

注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。

下载地址：

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

axios提供发送请求的常用方法有两个：axios.get() 和 axios.post() 。

增 post

删 delete

改 put

查 get

 // 发送get请求
 // 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
 // 参数2：可选，json对象，要提供给数据接口的参数
 // 参数3：可选，json对象，请求头信息
 axios.get('服务器的资源地址',{ // http://www.baidu.com
  params:{
   参数名:'参数值', // id: 200,
  }
 }).then(function (response) { // 请求成功以后的回调函数
   console.log("请求成功");
   console.log(response);
 }).catch(function (error) { // 请求失败以后的回调函数
   console.log("请求失败");
   console.log(error.response);
 });
 // 发送post请求，参数和使用和axios.get()一样。
 // 参数1: 必填，字符串，请求的数据接口的url地址
 // 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
 // 参数3：可选，json对象，请求头信息
 axios.post('服务器的资源地址',{
  username: 'xiaoming',
  password: '123456'
 },{
  responseData:"json",
 })
 .then(function (response) { // 请求成功以后的回调函数
  console.log(response);
 })
 .catch(function (error) { // 请求失败以后的回调函数
  console.log(error);
 });
 // b'firstName=Fred&lastName=Flintstone'

1.1 json

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式。

json的作用：在不同的系统平台，或不同编程语言之间传递数据。

1.1.1 json数据的语法

json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。

// json数据的对象格式：
{
 "name":"tom",
 "age":18
}
// json数据的数组格式：
["tom",18,"programmer"]

复杂的json格式数据可以包含对象和数组的写法。

{
 "name":"小明",
 "age":200,
 "fav":["code","eat","swim","read"],
 "son":{
 "name":"小小明",
 "age":100,
 "lve":["code","eat"],
 }
}

// 数组结构也可以作为json传输数据。

json数据可以保存在.json文件中，一般里面就只有一个json对象。

总结：

1. json文件的后缀是.json
2. json文件一般保存一个单一的json数据
3. json数据的属性不能是方法或者undefined，属性值只能：数值、字符串、json和数组
4. json数据只使用双引号、每一个属性成员之间使用逗号隔开，并且最后一个成员没有逗号。   

 {
  "name":"小明",
  "age":200,
  "fav":["code","eat","swim","read"],
  "son":{
  "name":"小小明",
  "age":100
  }
 }

工具：postman可以用于测试开发的数据接口。

1.1.2 js中提供的json数据转换方法

javascript提供了一个JSON对象来操作json数据的数据转换.

1.2 ajax

ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。

ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。

所以开发中ajax是很常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。

ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。

1.2.1 数据接口

数据接口，也叫api接口，表示后端提供操作数据/功能的url地址给客户端使用。

客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般：增删查改】

同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成。

1.2.3 ajax的使用

ajax的使用必须与服务端程序配合使用，但是目前我们先学习ajax的使用，所以暂时先不涉及到服务端python代码的编写。因此，我们可以使用别人写好的数据接口进行调用。

jQuery将ajax封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。

编写代码获取接口提供的数据：

jQ版本

 
 
 
 


点击获取数据

vue版本：

 
 
 
 


 
  
  点击获取天气