4. 通过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: ''
},{
responseData:"json",
})
.then(function (response) { // 请求成功以后的回调函数
console.log(response);
})
.catch(function (error) { // 请求失败以后的回调函数
console.log(error);
});
​ // b'firstName=Fred&lastName=Flintstone' 

4.1 json

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

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

4.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可以用于测试开发的数据接口。

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

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

方法 参数 返回值 描述
stringify json对象 字符串 json对象转成字符串
parse 字符串 json对象 字符串格式的json数据转成json对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// json语法
let humen = {
"username":"xiaohui",
"password":"",
"age":20
};

console.log(humen);
console.log(typeof humen);

// JSON对象提供对json格式数据的转换功能
// stringify(json对象) # 用于把json转换成字符串
let result = JSON.stringify(humen);
console.log(result);
console.log(typeof result);

// parse(字符串类型的json数据) # 用于把字符串转成json对象
let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
console.log(json_str)
console.log(typeof json_str)

let json_obj = JSON.parse(json_str);
console.log(json_obj);
console.log(typeof json_obj)

console.log(json_obj.age)
</script>
</body>
</html>

4.2 ajax

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

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

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

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

4.2.1 数据接口

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

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

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

4.2.3 ajax的使用

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

接口 地址
天气接口 http://wthrcdn.etouch.cn/weather_mini?city=城市名称
音乐接口搜索 http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲标题
音乐信息接口 http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.song.play&songid=音乐ID

 使用方式一jQuery.js:

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

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

jQ版本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
$("#btn").on("click",function(){
$.ajax({
// 后端程序的url地址
url: 'http://wthrcdn.etouch.cn/weather_mini',
// 也可以使用method,提交数据的方式,默认是'GET',常用的还有'POST'
type: 'get',
dataType: 'json', // 返回的数据格式,常用的有是'json','html',"jsonp"
data:{ // 设置发送给服务器的数据,如果是get请求,也可以写在url地址的?后面
"city":'北京'
}
})
.done(function(resp) { // 请求成功以后的操作
console.log(resp);
})
.fail(function(error) { // 请求失败以后的操作
console.log(error);
});
});
})
</script>
</head>
<body>
<button id="btn">点击获取数据</button>
</body>
</html>
总结:

1. 发送ajax请求,要通过$.ajax(),参数是对象,里面有固定的参数名称。
$.ajax({
"url":"数据接口url地址",
"method":"http请求方式,前端只支持get和post",
"dataType":"设置服务器返回的数据格式,常用的json,html,jsonp,默认值就是json",
// 要发送给后端的数据参数,post时,数据必须写在data,get可以写在data,也可以跟在地址栏?号后面
"data":{
"数据名称":"数据值",
}
}).then(function(resp){ // ajax请求数据成功时会自动调用then方法的匿名函数
console.log( resp ); // 服务端返回的数据
}).fail(function(error){ // ajax请求数据失败时会自动调用fail方法的匿名函数
console.log( error );
}); 2. ajax的使用往往配合事件/钩子操作进行调用。 jQuery还提供了$.get 和 $post简写$.ajax的操作。 // 发送get请求
// 参数1:数据接口的请求地址
// 参数2:发送给接口地址的数据参数
// 参数3:ajax请求成功以后,调用的匿名函数,匿名函数的第一个参数还是服务端返回的数据
// 参数4:设置服务端返回的数据格式,告诉给jQuery
$.get("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");

// 发送post请求
// 参数1:数据接口的请求地址
// 参数2:发送给接口地址的数据参数
// 参数3:ajax请求成功以后,调用的匿名函数,匿名函数的第一个参数还是服务端返回的数据
// 参数4:设置服务端返回的数据格式,告诉给jQuery
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");

使用方式二vue.js: 

vue版本:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="city">
<button @click="get_weather">点击获取天气</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
city:"",
},
methods:{
get_weather(){
// http://wthrcdn.etouch.cn/weather_mini?city=城市名称
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(response=>{
console.log(response);

}).catch(error=>{
console.log(error.response)
});
}
}
})
</script>
</body>
</html>

4.2.4 同源策略

同源策略,是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址(例如服务端接口地址与浏览器客户端页面地址)之间比较,是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下,没有权限读写对方信息。

ajax本质上还是javascript,是运行在浏览器中的脚本语言,所以会被受到浏览器的同源策略所限制。

前端地址:http://www.oldboy.cn/index.html 是否同源 原因
http://www.oldboy.cn/user/login.html 协议、域名、端口相同
http://www.oldboy.cn/about.html 协议、域名、端口相同
https://www.oldboy.cn/user/login.html 协议不同 ( https和http )
http:/www.oldboy.cn:5000/user/login.html 端口 不同( 5000和80)
http://bbs.oldboy.cn/user/login.html 域名不同 ( bbs和www )

同源策略针对ajax的拦截,代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="get_music">点击获取天气</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{},
methods:{
get_music(){
axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中国心")
.then(response=>{
console.log(response);

}).catch(error=>{
console.log(error.response)
});
}
}
})
</script>
</body>
</html>

上面代码运行错误如下:

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面错误,关键词:Access-Control-Allow-Origin

只要出现这个关键词,就是访问受限。出现同源策略的拦截问题。

流程图如下:

4.2.5 ajax跨域(跨源)方案之CORS(在服务端的响应行中设置:      Access-Control-Allow-Origin: 允许访问的域名地址

CORS是一个W3C标准,全称是"跨域资源共享",它允许浏览器向跨源的后端服务器发出ajax请求,从而克服了AJAX只能同源使用的限制。

实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。

django的视图

def post(request):

  response = new Response()

  response .set_header("Access-Control-Allow-Origin","*")

  return response;

// 在响应行信息里面设置以下内容:
Access-Control-Allow-Origin: ajax所在的域名地址

Access-Control-Allow-Origin: www.oldboy.cn # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问

// * 表示任意源,表示允许任意源下的客户端的ajax都可以访问当前服务端信息
Access-Control-Allow-Origin: *

总结:

0. 同源策略:浏览器的一种保护用户数据的一种安全机制。
  浏览器会限制脚本语法不能跨源访问其他源的数据地址。
  同源:判断两个通信的地址之间,是否协议,域名[IP],端口一致。
 
  ajax: http://127.0.0.1/index.html
  api数据接口: http://localhost/index
 
  这两个是同源么?不是同源的。是否同源的判断依据不会根据电脑来判断,而是通过协议、域名、端口的字符串是否来判断。
 
1. ajax默认情况下会受到同源策略的影响,一旦受到影响会报错误如下:
No 'Access-Control-Allow-Origin' header is present on the requested resource

2. 解决ajax只能同源访问数据接口的方式:
  1. 在服务端的响应行中设置:
    Access-Control-Allow-Origin: 允许访问的域名地址
  2. jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// jsonp的原理:利用html中的scrpt标签允许跨域请求资源来实现的
// 1. 第一步实现回调函数
// https://api.douban.com/v2/book/search?q=javascript&count=1&callback=callback function callback(data){
console.log(data);
} // 2. 使用js提供得到dom操作,创建一个script标签
let script = document.createElement("script"); // 3. 把script标签的src属性的值写成服务器的地址
script.src="https://api.douban.com/v2/book/search?q=javascript&count=1&callback=callback" // 4. 把script标签追加到head里面,浏览器会自动执行script获取src里面执行的地址的数据出来
document.head.append(script)
// 后端响应的数据一般就是以下格式保存到一个js地址文件中: /*
callback({"json格式的json数据"})
*/
</script>
</body>
</html>

jsonp

   3. 是否服务端代理
    思路:通过python来请求对应的服务器接口,获取到数据以后,

vue03 axios的更多相关文章

  1. 为什么axios请求接口会发起两次请求

    之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...

  2. axios基本用法

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...

  3. Axios、Lodash、TweenJS

    Axios是一个基于promise的HTTP库 http://chuansong.me/n/394228451820 Lodash是一个JavaScript的函数工具集 http://www.css8 ...

  4. axios全攻略

    随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...

  5. 抛弃vue-resource拥抱axios

    vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...

  6. Vue+axios 实现http拦截及路由拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...

  7. vue使用Axios做ajax请求

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...

  8. vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

    Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...

  9. 9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

    问题描述: 由于restful接口需要在头部header传递两个字段: Content-Type: application/jsonAccess-Token: 84c6635800b14e0eba4f ...

随机推荐

  1. [Dart] Understand Variables and Constants in Dart

    In this lesson, we will look at how to create variables and constants. These are containers that sto ...

  2. Scala入门到精通——第十五节 Case Class与模式匹配(二)

    本节主要内容 模式匹配的类型 for控制结构中的模式匹配 option类型模式匹配 1. 模式的类型 1 常量模式 object ConstantPattern{ def main(args: Arr ...

  3. 网络请求之GET、POST请求

    网络请求-GET请求: 1,NSURL: 请求地址. 2,NSURLRequest :一个NSURLRequest对象就代表一个请求.它包括的信息有: 1)一个NSURL对象 GET请求,不须要写请求 ...

  4. Spark SQL Catalyst源代码分析之UDF

    /** Spark SQL源代码分析系列文章*/ 在SQL的世界里,除了官方提供的经常使用的处理函数之外.一般都会提供可扩展的对外自己定义函数接口,这已经成为一种事实的标准. 在前面Spark SQL ...

  5. IT痴汉的工作现状22-由Dalvik虚拟机引发的口水战

    Dalvik是啥呢? 从未知道冰岛有Dalvik这么一个重要的村庄.直到Dan Bornstein将自己为Android系统编写的进程虚拟机命名为Dalvik后才被我所知. 它是Android系统独有 ...

  6. POI 读取word (word 2003 和 word 2007)(转,好用)

    POI 读取word (word 2003 和 word 2007)(转,好用) 转做的操作: 将作者文中失效的链接的正确链接放在失效链接的下面. 最近在给客户做系统的时候,用户提出需求,要能够导入 ...

  7. Linux 用户管理(1) (/etc/passwd)

    Linux所有的用户都在/etc/passwd文件里面. 1.为什么需要用户 1)计算机及网络资源的合理分配  2)可以控制用户访问系统的权限.3)身份认证 4) 进程 以某个用户的身份来运行 2.用 ...

  8. [转载]马士兵Java视频教程 —— 学习顺序

    书(Java核心编程)+视频..这样学感觉比较好.. 原文地址:马士兵Java视频教程 —— 学习顺序作者:习惯 第一部分:J2se学习视频内容包括: 尚学堂科技_马士兵_JAVA视频教程_JDK5. ...

  9. .ignore配置问题1:配置后所忽略的文件不起作用

    gitignore可以指定git忽略指定文件. 问题: 想忽略一些文件在.gitignore文件中会配置对应的文件,但是有时候配置后还是没有起作用: 我在element-ui封装个性化组件时,需要更换 ...

  10. 类型判断----小白讲解typeof,instanceof,Object.prototype.toString.call()

    1.typeof只能判断基本类型数据, 例子: typeof 1 // "number" typeof '1' // "string" typeof true ...