[JS]Axios

王震是也

已于 2024-07-16 09:19:39 修改

阅读量1.3k

点赞数 28

分类专栏： JavaScript 文章标签： ajax javascript

于 2024-05-26 00:29:38 首次发布

本文链接：https://blog.csdn.net/CSDN20221005/article/details/139206222

版权

JavaScript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本节目标

熟练使用axios

介绍
URL
HTTP

介绍

Axios是专注于网络数据请求的库

官网: Axios中文文档 | Axios中文网

基本使用

引入axios
使用axios函数, 传入配置对象, 接受服务器响应数据

<body>
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 需求: 请求资源地址, 展示数据到页面
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then((result) => {
      const res = result.data.list.join('<br />')
      document.querySelector('p').innerHTML = res
    })
  </script>
</body>

url

统一资源定位符(URL), 简称网页地址, 是因特网上标砖的资源地址

例如

组成

协议

http协议: 超文本传输协议, 规定浏览器和服务器之间传输数据的格式

协议范围: http/https/...

域名

域名: 服务器在互联网中的唯一标识

端口

端口: 标记服务器里不同功能的服务程序

区分一台服务中的不同程序

说明

端口范围: 0-65535之间的任意整数
http协议, 默认访问80端口
0-1023和一些特定端口号已经被占用, 我们自己的服务程序要避开

资源路径

资源路径: 标记资源在服务器中的具体位置

查询参数

浏览器提供给服务器的额外信息, 让服务返回指定的数据

说明

指定格式: http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
在axios中: 通过params选项, 传送查询参数

示例

<body>
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 需求: 请求资源地址, 展示数据到页面
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      params: {
        pname: '山东省'
      }
    }).then((result) => {
      const res = result.data.list.join('<br />')
      document.querySelector('p').innerHTML = res
    })
  </script>
</body>

请求方法

对服务器资源, 要执行的操作

常用请求方法

get 获取资源
post 提交资源
put 修改资源(全部)
delete 删除资源
patch 修改资源(不分)

说明

无论原生还是axios, 都是通过method选项, 配置请求方法
get是默认的请求方式

body参数

浏览器提供给服务器的额外信息, 信息放在请求体里面

说明

无论原生还是axios, 都是通过data选项, 传递请求体参数
post请求可以传递请求体参数,也可以传递查询参数
get请求只能传递查询参数

示例

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*  
     目标: 点击按钮, 通过axios提交用户和密码, 完成注册
    */
    document.querySelector('.btn').addEventListener('click', function () {
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'post',
        data: {
          username: 'wsdsg666',
          password: 'wsdsg666'
        }
      }).then((result) => {
        console.log(result);
      })
    })
  </script>
</body>

错误处理

axios提供了catch函数, 可以捕获请求出现的错误

说明

catch函数捕获的是axios错误信息

示例

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*  
     目标: 处理请求可能出现的错误
    */
    document.querySelector('.btn').addEventListener('click', function () {
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'post',
        data: {
          username: 'wsdsg666',
          password: 'wsdsg666'
        }
      }).then((result) => {
        // 成功
        console.log(result);
      }).catch((err) => {
        // 失败
        console.log(err)
        alert(err.response.data.message)
      })
    })
  </script>
</body>