Axios

最新推荐文章于 2024-09-13 15:19:32 发布

没伞的孩子努力奔跑

最新推荐文章于 2024-09-13 15:19:32 发布

阅读量321

点赞数

文章标签： ajax vue.js javascript html5 jquery

本文链接：https://blog.csdn.net/weixin_49591538/article/details/119281398

版权

一概念

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>
       
       <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)
                   })

注意使用的模版字符串,语法反引号加${对象.属性}

特点:不用拼接字符串,随意换行,动态拼接,保留代码结构

å¨è¿éæå¥å¾çæè¿°

五 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)
                           })