Ajax&Fetch学习笔记 07、axios(第三方库)

举报
长路 发表于 2022/11/28 21:38:57 2022/11/28
【摘要】 文章目录前言导航安装axios一、axios.get二、POST请求总结 前言 本篇博客是介绍axios的使用,若文章中出现相关问题,请指出! 所有博客文件目录索引:博客目录索引(持续更新) 导航 axios中文文档 axios中响应data数据已经自动帮我们转为json对象了(对于get、post请求)!!! 安装axios npm install axios 一、axios.get

@[toc]

前言

本篇博客是介绍axios的使用,若文章中出现相关问题,请指出!

所有博客文件目录索引:博客目录索引(持续更新)

导航

axios中文文档

axios中响应data数据已经自动帮我们转为json对象了(对于get、post请求)!!!



安装axios

npm install axios


一、axios.get

对于请求参数携带有两种方式:

//方式一:直接写在第一个参数url的后面
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//方式二:写在第二个参数中以对象的形式,属性为params
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

示例

<body>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
    <script>
        const url = "https://www.imooc.com/api/http/search/suggest?word=ajax";

        axios.get(url, {
            params: {
                username: 'changlu'
            }
        }).then(function (response) {
            console.log(response.data);
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.headers);
            console.log(response.config);
        });
    </script>
</body>

image-20210718182041689

image-20210718182259939



二、POST请求

对于POST请求,axios会根据的data类型来为你自动设置Content-Type。当然你也可以自己来主动设置内容类型。

  • data为字符串如:"age=18&sex=男"Content-Type自动设置为application/x-www-form-urlencoded
  • data为对象如:{ sex: 'women', tel: '123'},就会自动设置为application/json

注意:对于Content-Type: application/json这种类似请求,需要后端设置一个响应头如下,否则也会被浏览器拦截到。

  • image-20210718183324962

方式一:采用axios构造器自动配置的形式发送ajax请求

<body>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
    <script>
        // const url = "https://www.imooc.com/api/http/json/search/suggest?word=ajax";  //后端对于application/json处理过的接口
        const url = "https://www.imooc.com/api/http/json/search/suggest?word=ajax";  //后端对于application/json没有处理,只响应application/x-www-form-urlencoded的get请求
        
        // 方式一:采用axios构造器自动配置的形式发送ajax请求
        axios(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            // 请求参数
            params: {
                username: 'changlu'
            },
            // 请求体携带参数
            data: "age=18&sex=男"

        }).then(function (response) {
            console.log(response.data);
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.headers);
            console.log(response.config);
        });
    </script>
</body>

方式二:采用axios.post(url,请求体)

参数二传入对象:

<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script>
    // const url = "https://www.imooc.com/api/http/json/search/suggest?word=ajax";  //后端对于application/json处理过的接口
    const url = "https://www.imooc.com/api/http/search/suggest?word=ajax";  //后端对于application/json没有处理,只响应application/x-www-form-urlencoded的get请求

    // 调用axios.post发出请求,在第二个参数中只能传入请求体内容,如对象或字符串形式,axios会根据类型来帮你自动设置content-type
    // 1、传入对象,默认帮你设置content-type为application/json;charset=utf-8
    axios.post(url, {
        name: 'changlu',
        age: 18
    }).then(function (response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
    });
</script>

参数二传入字符串:

//对于传入字符串形式的,自动会给你设置content-type为application/x-www-form-urlencoded
axios.post(url, "name=changlu&age=18")
.then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
});


总结

对于axios这个第三方库帮我们封装的很好了,会自动帮你设置一些请求头等信息,并且你可以进行一系列的相关配置等等,都可以见官网即可!!!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。