一 概念
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
?特点: 调用简洁 解决了 “回调地狱问题”!!!*
结构说明:
?? ?1. JS中原生提供了Ajax操作. ?弊端: 操作特别的复杂 易用性较差.
?? ?2. jQuery中的Ajax ? ?封装了原生的JS Ajax ? ?提高了开发的效率 ?
?? ?3. Axios是VUE中默认支持的Ajax的请求的方式. ?
二 Axios调用步骤
- 导入Axios的JS文件
- 发起Ajax请求
- 解析返回值
注意事项:
1.Axios将原来的嵌套的结构,改为链式加载方式 *
2.回调函数中的data,不是服务器的返回值,是promise对象
promise对象说明: 其中data表示服务器的返回值.
例子:
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>Axios</title>
?? ?</head>
?? ?<body>
?? ??? ?<h1>Axios练习</h1>
?? ??? ?<!-- 引入JS文件 -->
?? ??? ?<script src="../js/axios.js"></script>
?? ??? ?<script>
?? ??? ??? ?/**
?? ??? ??? ? * 注意事项:
?? ??? ??? ? * ?? ??? ?1.Axios将原来的嵌套的结构,改为链式加载方式
?? ??? ??? ? * ? ?2.回调函数中的data,不是服务器的返回值,是promise对象
?? ??? ??? ? *?
?? ??? ??? ? * 发起Ajax请求:
?? ??? ??? ? * ?? ?1. GET请求获取数据
?? ??? ??? ? */
?? ??? ??? ?axios.get("http://localhost:8090/axios/getUser")
?? ??? ??? ??? ??? ? .then(function(result){//promise对象
?? ??? ??? ??? ??? ??? ?//获取服务器返回值 ?promise.data
?? ??? ??? ??? ??? ??? ? console.log(result.data)
?? ??? ??? ??? ??? ? })
?? ??? ??? ?
?? ??? ?</script>
?? ?</body>
</html>
三? ?Axios-Get-简单参数
axios.get("http://localhost:8090/axios/getUserById?id=100")
.then(function(result){ console.log(result.data) })
* then(): 回调函数通过then返回 结构
四??Axios-Get-resultFul结构
?? ?/**
?? ??? ??? ? * restFul风格实现业务传参?
?? ??? ??? ? * 需求: 根据name/age查询数据
?? ??? ??? ? * URL: http://localhost:8090/axios/user/tomcat/18
?? ??? ??? ? * 注意: 模版字符串优化参数 ?``
?? ??? ??? ? */
?? ??? ??? ?let name = "mysql"
?? ??? ??? ?let age = 20
?? ??? ??? ?axios.get(`http://localhost:8090/axios/user/${name}/${age}`)
?? ??? ??? ??? ??? ? .then(function(result){
?? ??? ??? ??? ??? ??? ? console.log(result.data)
?? ??? ??? ??? ??? ? })
?
注意? get() 使用反引号
五??Axios-Get-对象传参
语法: axios.get("url","参数").then(回调函数)
let user = {
?? ??? ??? ??? ??? ?name: "mysql",
?? ??? ??? ??? ??? ?age: 18,
?? ??? ??? ??? ??? ?sex: "女"
?? ??? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ??? ?axios.get(
?? ??? ??? ??? ??? ?"http://localhost:8090/axios/user/getUserObj",{params: user})
?? ??? ??? ??? ??? ?.then(function(result){
?? ??? ??? ??? ??? ??? ?console.log(result.data)
?? ??? ??? ??? ??? ?})
?? ??? ??? ?
?? ??? ??? ?/* ?? ?axios.get("http://localhost:8090/axios/user/getUserObj",
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?//key: value ?key固定写法 params 参数对象
?? ??? ??? ??? ??
?
? ?params: {
?? ??? ??? ??? ??? ??? ?//再写用户的参数
?? ??? ??? ??? ??? ??? ?name: "mysql",
?? ??? ??? ??? ??? ??? ?age: 18,
?? ??? ??? ??? ??? ??? ?sex: "女"
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}).then(function(result){
?? ??? ??? ??? ??? ?console.log(result.data)
?? ??? ??? ??? ?}) */
?? ??? ??? ??? ?
六 Axios-Delete请求
?删除的语法与Get请求的语法一致的.
1.不带参数的删除
axios.delete(“url地址”).then(function(result){ … })
2.携带个别参数 ?id=100
axios.delete(“url地址?id=100”).then(function(result){ … })
3.restFul结构
可以使用模版字符串的方式简化代码结构
axios.delete( "url地址/xxx/xxx/xxx").then(function(result){ … })
4.采用对象的方式进行参数传递
let 对象 = {xxxx:xxxx,xxxx:xxxx}
axios.delete( "url地址/xxx/xxx/xxx", {params: 封装后的对象}).then(function(result){ … })
七? Axios-post请求
1.什么时候使用post请求?
一般采用form表单提交时,采用post请求类型 主要用于数据的新增操作
2.get请求/post请求主要的区别
get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的
post: 一般采用post请求数据是涉密的
3.如果需要对象传参
1.get请求采用 axios.get(url,{params: 对象})
2..post请求 axios.post(url,对象)
例如
let user = {
?? ??? ??? ??? ??? ??? ?name: "post请求的语法",
?? ??? ??? ??? ??? ??? ?age: 20,
?? ??? ??? ??? ??? ??? ?sex: '女'
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?let url1 = "http://localhost:8090/axios/insertUser"
?? ??? ??? ??? ??? ?axios.post(url1, user)
?? ??? ??? ??? ??? ??? ??? ? .then(function(result){
?? ??? ??? ??? ??? ??? ??? ??? ? console.log(result.data)
?? ??? ??? ??? ??? ??? ??? ? })
八? 传参的数据结构
如果采用post的方式传递对象,则数据结构是一个JSON
?
?
?例子
?
九 jQuery中的post请求/Axios中的post请求对比/restFul格式
1.Axios中的Post请求格式
如果传递的数据是JSON串 ,则在后端采用@RequestBody注解 实现JSON串转化为对象
2.jQuery中的post请求格式
如果采用form表单的方式提交,则可以直接采用对象的方式接收
3.?restFul的格式是将参数拼接到URL中 采用特殊的方式获取数据
?
?
十 Axios-post-restFul结构
?? ?/**
?? ??? ??? ??? ??? ? * post请求 restFul的写法
?? ??? ??? ??? ??? ? * 实现用户新增入库
?? ??? ??? ??? ??? ? * url: http://localhost:8090/axios/user/name/age/sex
?? ??? ??? ??? ??? ? */
?? ??? ??? ??? ??? ?let url2 = "http://localhost:8090/axios/user/redis/18/男"
?? ??? ??? ??? ??? ?axios.post(url2)
?? ??? ??? ??? ??? ??? ??? ? .then(function(result){
?? ??? ??? ??? ??? ??? ??? ??? ? console.log(result.data)
?? ??? ??? ??? ??? ??? ??? ? })
?
十一? async-await用法-箭头函数
?概念解释
1.async/await 是ES7引入的新语法 可以更加方便的进行异步操作
2.async 关键字用在函数上. 返回值是一个promise对象
3.await 关键字用在async 函数中
?
十二? async-await 操作
1.async-await简化 解构赋值 *
2?async 需要标识函数 *
3. await 需要标识ajax请求
?
十三 Axios配置信息
?? ?//配置基本请求路径
?? ?axios.defaults.baseURL = "http://localhost:8080(路径)/"
?
?
?
?
