IOS教程

Axios

本文主要是介绍Axios，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一 概念

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

 特点: 调用简洁 解决了 “回调地狱问题”!!!*

结构说明:
    1. JS中原生提供了Ajax操作.  弊端: 操作特别的复杂 易用性较差.
    2. jQuery中的Ajax    封装了原生的JS Ajax    提高了开发的效率  
    3. Axios是VUE中默认支持的Ajax的请求的方式.  

二 Axios调用步骤

  1. 导入Axios的JS文件
  2. 发起Ajax请求
  3. 解析返回值

注意事项:

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(路径)/"
 

 

 

 

这篇关于Axios的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航