Axios的HTTP请求

Axios概念:

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
• 而promise对象已经解决传统ajax中的回调地狱问题，异步调用更加简洁

Axios优点:

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

promise基础的概念

Promise是一种异步编程的一种解决方案.从语法上讲Promise是一个对象，从它身上可以获取异步调用的信息


作用：

1. promise它也是一种原生的的 HTTP 库，它主要实现了传统JQuery Ajax回调地狱的问题
2. promise的原始传参方式：以参数 1.url地址 2.请求参数 3.回调函数
3. Promise对象提供了简洁的API 用法简单

什么是回调地狱

一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套。这会导致代码很丑陋，结构不清晰，不方便后期维护

JQuery回调地狱如何解决？

• JQuery回调地狱问题可以通过闭包的方式解决

http协议的请求类型

常用请求方式有5种，传输层上来看的话分为两组：

1. get/delete ：参数是KEY=VALUE结构,如果传递多个数据,则通过&方式进行拼接
2. post/put ：参数在前端是以js对象发送，到后端会以json串的形式读取
   
   

注意：

1. 在axios中get/delete的请求方式也是一样的以下只展示get，delete请求参考get方式即可
2. 在axios中post/put 与上相同，学会post请求put请求方式请求时一样的
3. 使用delete请求使用：axios.delete("")；使用put 请求使用: axios.put("")

使用Axios的get请求语法

get请求 (原始方式)

• Axios的调用参数方式是:1.url地址 2.请求参数

axios.get("http://localhost/user/getUserByUS?id=1").then(function(result) {
	console.log(result.data)
})

get() ： 表示这个函数是以http协议get方式发送请求的，参数为请求的url
then ： axios里的发送请求的函数
then内部函数 ： 定义了请求的回调方法
result ： 表示promise对象，其中包含着很多信息，以及服务器返回的数据
result.data ： 可以获取服务器返回的数据
axios.get("") ： 方法返回的对象是promisce,所以then()是promisce的方法


传参 : 支持在url后拼接参数，可想后端发送 get / RestFul 的请求(遵循url传参的语法格式)

get请求 (简化版: 箭头函数)

axios.get("http://localhost/user/getUserByUS").then( result => {
	console.log(result.data)
})

在原来的基础上 function(result) {} 变为 result => {} 的方式
如果then()函数中对象除了result还有其他属性则需要加括号 (result, …) => {} 的方式

get请求 (通过对象传参)

axios.get("http://localhost/user/getUserByUS", {
	params: {
		name:'黑熊精',
		sex:'男'
	}
}).then(result => {
	console.log(result.data)
})

params： 是一个关键字，就是使用这种格式，param不可以改变
params{内部}： 是以js对象的方式进行传参

get 请求通过RestFul的方式注意

1. 利用RestFul可以简化用户get请求类型
2. 编辑RestFul请求时应采用无状态(请求中不能出现动词，无状态)的请求名称，因为不能把自己的意图告诉别人
3. 使用RestFul时应该按照规范编辑请求的类型. GE(查) / PUT(修改) / POST(新增) / DELETE(删除)

使用Axios的post请求语法

原始版写法请求post

let user = {
	name: "英雄联盟",
	age: 12,
	sex: "男"
}
axios.post("请求地址",user).then(result => {
	result.data
	console.log(result.data)
})

代码说明：
user： 是js的对象，对象内部是需要定义发送给服务器的参数名和参数信息。也就是Key : Value的键值对
axios.post()： 该方法返回一个promise对象，其后的then()方法是promise对象的其中一个方法

网络请求注意：

1. post请求经过httpt协议进行传输,则数据由原来的JS对象会变为了有特殊格式意义的JSON串
2. 请求失败时出现两个同样地址名字的错误，其中一个是CORS error：预检服务器是否可以跨域，无需关心这个错误请求；则另外一个才是真正的请求
3. post使用Restful数据请求，则只写axios.post(“url”)，对象可省略可加，须看后端需求，遵循RestFul的URL语法即可

简化axios的请求方式(所有请求通用)

1.设置axios的公共请求路径：

axios.defaults.baseURL = "http://localhost/user";

axios.post("/saveUser", user).then(result => { })

2.简化请求接收请求代码

async function ajax() {
	let {data: value} = await axios.post("/saveUser", user);
	console.log(value)
}

ES7开始提供了await asyno两个关键字可以简化axios两部请求的代码

1. async： 用在函数中，支持解构
2. await : 表示异步请求，解构操作
3. 要求：两个关键字必须同时出现，才有它的意义，所以必须写在方法体内
   
   

代码说明：

1. let { data: value }：是用来接收解构后的对象，它就是原来的的回调函数result对象
2. ajax返回值data赋值给value(data是属性不可以改变，value是形参是可以改变的