Ajax（三）: axios发送Ajax请求_axiox

作者：笔触狂放9 | 2024-05-16 12:46:53

踩

axiox

axios发送AJAX请求

一、什么是axiox?
二、Axios的使用
- 1、安装axios
- 2、在线引用：
三、axios发送Ajax请求
总结

一、什么是axiox?

理解：最早的浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。

并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。

Ajax(Asynchronous JavaScript and XML)：异步网络请求。Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种：

原生的XMLHttpRequest
jQuery封装的ajax
axios

由于原生的XMLHttpRequest的配置和调用方法繁琐，故有了axios。

Axios: 可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范.

参考链接：http://www.axios-js.com/docs/index.html

二、Axios的使用

1、安装axios

脚手架目录npm i axios

2、在线引用：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我使用的2在线使用，没有安装。
先配置服务端，类型改成all，允许接受自定义头请求。

/ axios服务
app.all('/axios-server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    
      //响应一个数据
      const data = { name: '799星辰' };
      response.send(JSON.stringify(data));
})
//4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中...');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

其中用到了json响应。

三、axios发送Ajax请求

1、发送GET请求

<body>
    <button>GET</button>
    <button>POST</button>
    <script>
        const btns = document.querySelectorAll('button');
        btns[0].onclick = function(){
            //GET 请求
            axios.get('http://127.0.0.1:8000/axios-server',{
                // url参数
                params: {
                    id: 100,
                    vip: 7
                },
                // 请求头信息
                headers: {
                    name: 'shang',
                    age: 18
                }
            }).then(value => {//数据返回
                console.log(value);
            })
        }
    </script> 
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意一些细节，逗号、括号、params拼写，因为这些找了半天错误…

另：可用baseURL对url进行简化。

//配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';
1
2

将原来完整的url修改为如下：

axios.get('/axios-server',{
});
1
2

数据返回是基于Promise的：

.then(value => {
                console.log(value);
            })
1
2
3

axios发送请求成功的值是一个封装好的响应对象。
在这里插入图片描述
我们想要的响应数据其实藏在response.data中

2、发送POST请求

在这里插入图片描述
注意格式书写，参数顺序。

   btns[1].addEventListener('click', function() {
        //POST请求
        axios.post('/axios-server',{
            //请求体
            name: 'ryy',
            psd: '123'
        },{
            //url参数
            params: {
            a:1,
            b:2
            },
            //请求头信息
            headers: {name:'ryy',age:20}
        })
    })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、axios函数发送通用请求

与jquary类似。按照报文的格式。

btns[1].onclick = function (){
            axios({
                // 请求方法
                method: 'POST',
                // url
                url: 'http://127.0.0.1:8000/axios-server',
                // url参数
                params: {
                    vip:10,
                    level:30
                },
                // 头信息
                headers: {
                    a:100,
                    b:200
                },
                // 请求体
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then((response) =>{
        console.log('全部响应结果:',response);
        console.log('响应状态码:', response.status);
        console.log('响应状态字符串:',response.statusText);
        console.log('响应头信息:', response.headers);
        console.log('响应体:', response.data);
    })

        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

这种方式发送请求非常nice，因为和报文非常贴切，而且语法简单。

总结

axios本质上是对原生XMLHttpRequest的封装，不需要复杂的步骤，如下
在这里插入图片描述
现在只需要写axios.get 或 axios.post 或通用请求。总之就是方便了许多~~
下一步要补一下 Promise 了…

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/578800