2020-03-19

axios 前后端数据交互的方法

基于promise的一个http请求方式，可以在客户端和服务端进行使用
特点：
1、在浏览器中可以创建XMLHTTPRequest
2、可以在服务端创http服务
3、支持promiseAPI
4、数据类型的转换
5、数据类型的劫持
.....

1、get请求
axios.get("/user",{
params:{
//需要传递的参数
},
headers:{}
})
.then(()=>{})
.catch(()=>{})

2、post
axios.post("/user",{
//需要传递的参数
}).
then(()=>{})
.catch(()=>{})

3、axios的综合写法
axios({
method:"请求的方式"
url:"请求的地址"
data:发送的数据
headers:请求头
}).then(()=>{})
.catch(()=>{})

axios
post请求的时候参数通过data进行传递
get请求的时候参数通过params进行传递
axios.create:创建一个新的axios
headers:{
content-type:"application/json"
application/x-www-form-urlencoded
name=zhangsan&age=19
}
withCredentials:携带cookie

#######json
本地写json数据并在页面中调用：
一种是用js文件中写的，
在html文件中调用 <script src="路径 + json.js"></script> 之后可以用console.log()查看。
一种是在json文件中写的。
可以使用ajax来调用
$.ajax({
url: "路径 + 名称.json",//json文件位置
type: "post",
dataType: "json", //返回数据格式为json
success: function(data) {//请求成功完成后要执行的方法
console.log(data)
}
})

3JSONP

JSONP指的是 JSON with Padding。
JSONP 是一种无需考虑跨域问题即可传送 JSON 数据的方法。
JSONP 不使用 XMLHttpRequest 对象。
JSONP 使用 <script> 标签取而代之。

Server 文件

服务器上的文件在函数调用中封装结果：
实例
<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }'; echo "myFunc(".$ myJSON.");";
?>
结果返回对名为 "myFunc" 的函数的调用，其中的 JSON 数据为参数。
请确保客户端存在该函数。

#######JavaScript 函数
函数 "myFunc" 位于客户端，用于处理 JSON 数据：
实例
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}

##########创建动态脚本标签
Script 只应该在需要时创建：
实例
在按钮被点击时创建和插入 <script> 标签：
function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}

动态 JSONP 结果

可通过向 PHP 文件发送 JSON 来创建动态的例子，然后根据这个 php 文件获得的信息让它返回一个 JSON 对象。
PHP 文件
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($ _GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");$ result = $conn->query("SELECT name FROM ".$ obj-> $table." LIMIT ".$ obj-> $limit);$ outp = array();
$outp =$ result->fetch_all(MYSQLI_ASSOC);
echo "myFunc(".json_encode($outp).")";
?>

####### JavaScript 实例
将从 php 文件调用 "myFunc" 函数：
function clickButton() {
var obj, s
obj = { "table":"products", "limit":10 };
s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
}
function myFunc(myObj) {
var x, txt = "";
for (x in myObj) {
txt += myObj[x].name + "
";
}
document.getElementById("demo").innerHTML = txt;
}

回调函数

如果您无法控制服务器文件，那么如何使服务器文件调用正确的函数呢？
有时服务器文件提供回调函数作为参数：
实例
PHP 文件会调用您作为回调参数传递的函数：
function clickButton() {
var s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
}

Proxy(代理)

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，其实就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由自己来定义。

语法

let p = new Proxy(target, handler)

参数

target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。

一个简单的代理:
let test = {
name: "小红"
};
test = new Proxy(test, {
get(target, key) {
console.log('获取了getter属性');
return target[key];
}
});
console.log(test.name);

上方的案例，我们首先创建了一个test对象，里面有name属性，然后我们使用Proxy将其包装起来，再返回给test，此时的test已经成为了一个Proxy实例，我们对其的操作，都会被Proxy拦截。
Proxy有两个参数，第一个是target,也就是我们传入的test对象,另一个则是handler，也就是我们传入的第二个参数，一个匿名对象。在handler中定义了一个名叫get的函数，当我们获取 test的属性时，则会触发此函数。