AJAX概述+axios使用+URL+接口文档

技术博客 (166) 2023-11-13 09:01:01

一、简述

  1. 是什么:
    • 是Asynchronous JavaScript And XML:使用XMLHttpRequest对象与服务器通信
    • 是浏览器与服务器进行数据通信的技术
  2. 怎么用:
    • 先用axios库,与服务器进行数据通信
      • 使用axios原因
        • 其基于XMLHtttpRequest封装、代码简单、月下载量大
        • vue、react项目都会用到axios
    • 再学习XMLHttpRequest对象的使用,了解AJAX底层原理

二、axios使用

  1. 引入axios.js:
    • cdn.jsdeliver.net/npm/axios/d…
  2. 传入axios函数
    • 传入配置对象
    • 再用.then回调函数接收结果,并进行后续处理
  3. 请求配置
    • url:请求的URL网址
    • params:查询参数
    • method:请求的方法(GET可省略)(不区分大小写)
    • data:请求数据
  4. axios错误处理
    • 调用catch方法,传入回调函数并定义形参

我的实践: AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第1张 AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第2张 AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第3张 AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第4张

三、URL

  1. 是什么:
    • 统一资源定位符(Uniform Resource Locator)/网址
  2. 组成(协议://域名/资源路径):
    • 协议:传输数据的格式

      • 比如:http协议
        • 作用
          • 规定了浏览器发送及服务器返回内容的格式
        • 请求报文
          • 是什么:
            • 浏览器安装HTTP协议要求的格式,发送给服务器的内容
          • 组成
            • 请求行:请求方法、URL,协议
            • 请求头:以键值对的格式携带的附加信息
            • 空行:分隔请求头,空行之后的是发送给服务器的资源
            • 请求体:发送的资源
          • 查看方式 AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第5张 AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第6张
        • 响应报文:
          • 是什么:
            • 服务器按HTTP协议要求的格式,返回给浏览器的内容
          • 组成:
            • 响应行(状态行):协议、HTTP响应状态码、状态信息
            • 响应头
            • 空行:分隔响应头,空行之后是服务器返回的资源
            • 响应体:返回的资源
          • 关于响应状态码 AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第7张
    • 域名:标记服务器在互联网的方位

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

  3. URL查询参数:
    • 是什么:
      • 浏览器提供给服务器的额外信息,让服务器返回给浏览器想要的数据
    • 语法:
      • xxxx.com/xxx/xxx?参数名…
    • axios的查询参数
      • 语法
        • 使用axios提供的params选项
      • 注意
        • axios在运行时会把参数名和值拼接到url?参数名=值
    • 我的实践 AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第8张
  4. 请求方法:
    • 是什么:
      • 对服务器资源要执行的操作
    • 常用请求方法:
常见请求方法 作用 应用场景
GET 获取数据 获取服务器上的数据
POST 提交数据 当提交的数据需要在服务器上保存
PUT 修改全部的数据
DELETE 删除数据
PATCH 修改部分数据

我的实践(post):

AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第9张 AJAX概述+axios使用+URL+接口文档 (https://mushiming.com/) 技术博客 第10张

四、接口文档

  1. 是什么:
    • 描述接口的文档
  2. 接口:
    • 使用AJAX和服务器通讯时,使用的URL,请求方法以及参数
THE END

发表回复