axios--入门讲解

最新推荐文章于 2025-09-12 16:23:03 发布
原创 最新推荐文章于 2025-09-12 16:23:03 发布 · 1.1k 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax

第1章：HTTP相关

1.1 MDN文档

文档地址

1.2 HTTP请求交互的基本过程

在这里插入图片描述

  1. 前台应用从浏览器端向服务器发送HTTP请求(请求报文)
  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
  3. 浏览器端接收到响应, 解析显示响应体/保存数据并调用监视回调

1.3 HTTP请求报文

  1. 请求行:
    methodurl
    GET/product_detail?id=2
    POST/login
  2. 请求头(多个):
    Host:www.baidu.com
    Cookie:BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
    Content-Type:application/x-www-form-urlencoded 或者 application/json
  3. 请求体:
    格式内容
    urlencoded格式:username=tom&pwd=123
    json格式:{“username”: “tom”, “pwd”: 123}

1.4 HTTP响应报文

  1. 响应行:
    status statusText
    200 OK
    404 Not Found
  2. 响应头(多个)
    Content-Type: text/html; charset=utf-8 text/json; charset=utf-8
    Set-Cookie: BD_CK_SAM=1; path=/
  3. 响应体
    html文本/json文本/js/css/图片…

1.5 post请求体参数格式

  1. Content-Type: application/x-www-form-urlencoded; charset=utf-8
    用于键值对参数，参数的键值用=连接, 参数之间用&连接
    例如: name=%E5%B0%8F%E6%98%8E&age=12
  2. Content-Type: application/json; charset=utf-8
    用于json字符串参数
    例如: {“name”: “%E5%B0%8F%E6%98%8E”, “age”: 12}
  3. Content-Type: multipart/form-data
    用于文件上传请求

1.6 常见的响应状态码

状态码提示说明
200OK请求成功。一般用于GET与POST请求
201Created已创建。成功请求并创建了新的资源
401Unauthorized未授权/请求要求用户的身份认证
404Not Found服务器无法根据客户端的请求找到资源
500Internal Server Error服务器内部错误，无法完成请求

1.7 不同类型的请求及其作用

  1. GET: 从服务器端读取数据
  2. POST: 向服务器端添加新数据
  3. PUT: 更新服务器端数据
  4. PATCH: 更新服务器数据
  5. DELETE: 删除服务器端数据

1.8 使用postman测试API

在这里插入图片描述

1.9 API的分类

1.9.1 REST(restful) API
  1. 发送请求进行CRUD哪个操作由请求方式来决定
  2. 同一个请求路径可以进行多个操作
  3. 请求方式会用到GET/POST/PUT/DELETE
1.9.2 非REST(restless) API
  1. 请求方式不决定请求的CRUD操作
  2. 一个请求路径只对应一个操作
  3. 一般只有GET/POST

1.10 使用json-server搭建REST API

1.10.1 json-server是什么?

用来快速搭建模拟的REST API的工具包

1.10.2 使用json-server

  1. 在线文档

  2. 下载:

    npm install -g json-server

  3. 目标根目录下创建数据库json文件: db.json

 {
      "posts": [
        { "id": 1, "title": "json-server", "author": "typicode" }
      ],
      "comments": [
        { "id": 1, "body": "some comment", "postId": 1 }
      ],
      "profile": { "name": "typicode" }
    }

  1. 启动服务器执行命令:

    json-server --watch db.json
1.10.3 使用浏览器访问测试

http://localhost:3000/posts
http://localhost:3000/posts/1

1.10.4 使用postman测试接口
测试GET / POST / PUT / DELETE请求

第2章：XHR的理解和使用

2.1.MDN文档

地址

2.2 理解

  1. 使用XMLHttpRequest (XHR)对象可以与服务器交互, 也就是发送ajax请求
  2. 前端可以获取到数据，而无需让整个的页面刷新。
  3. 这使得Web页面可以只更新页面的局部，而不影响用户的操作。

2.3 区别一般http请求与ajax请求

在这里插入图片描述

  1. ajax请求是一种特别的http请求
  2. 对服务器端来说, 没有任何区别, 区别在浏览器端
  3. 浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求
  4. 浏览器端接收到响应
    (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    (2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

2.4 API

  1. XMLHttpRequest(): 创建XHR对象的构造函数
  2. status: 响应状态码值, 比如200, 404
  3. statusText: 响应状态文本
  4. readyState: 标识请求状态的只读属性
    0: 初始
    1: open()之后
    2: send()之后
    3: 请求中
    4: 请求完成
  5. onreadystatechange: 绑定readyState改变的监听
  6. responseType: 指定响应数据类型, 如果是’json’, 得到响应后自动解析响应体数据
  7. response: 响应体数据, 类型取决于responseType的指定
  8. timeout: 指定请求超时时间, 默认为0代表没有限制
  9. ontimeout: 绑定超时的监听
  10. onerror: 绑定请求网络错误的监听
  11. open(): 初始化一个请求, 参数为: (method, url[, async])
  12. send(data): 发送请求
  13. abort(): 中断请求
  14. getResponseHeader(name): 获取指定名称的响应头值
  15. getAllResponseHeaders(): 获取所有响应头组成的字符串
  16. setRequestHeader(name, value): 设置请求头

2.5 XHR的基本使用

  1. 创建XHR对象
  2. 打开连接
  3. 绑定状态改变的监听, 并在异步回调中读取响应数据
  4. 发送请求

2.6 XHR的ajax封装(简单版axios)

2.6.1.特点

  1. 函数的返回值为promise, 成功的结果为response, 异常的结果为error

  2. 能处理多种类型的请求: GET/POST/PUT/DELETE

  3. 函数的参数为一个配置对象

    {
	url: '',   // 请求地址
	method: '',   // 请求方式GET/POST/PUT/DELETE
	params: {},  // GET/DELETE请求的query参数
	data: {}, // POST或PUT请求的请求体参数 
}

  4. 响应json数据自动解析为js

2.6.2 编码实现
/*
    使用XHR封装发送ajax请求的通用函数
      返回值: promise
      参数为配置对象
        url: 请求地址
        params: 包含所有query请求参数的对象 {name: tom, age: 12} ==> name=tom&age=12
        data: 包含所有请求体参数数据的对象
        method: 为请求方式
    */
    function axios({url, method='GET', params={}, data={}}) {
      method = method || 'GET'
      method = method.toUpperCase()
      // 将params中的参数属性拼接到url上   
      // {name: tom: pwd: 123}  ===> queryStr=name=tom&pwd=123
      // url + ? + queryStr
      let queryStr = ''
      Object.keys(params).forEach(key => {
          queryStr += '&' + key + '=' + params[key]
      })
      if (queryStr) {
        queryStr = queryStr.substring(1) // 'name=tom&pwd=123'
        url += '?' + queryStr  // /user?name=tom&pwd=123
      }     
      return new Promise((resolve, reject) => {
        // 创建XHR对象
        const request = new XMLHttpRequest()
        // 打开连接(初始化请求对象)
        request.open(method, url, true)
        // 设置响应数据类型 ==> 自动解析json文本为js对象/数组, 保存给response属性上
        request.responseType = 'json'
        // 绑定监视request的状态改变的监听
        request.onreadystatechange = function () {
          // 如果请求还没有完成, 直接结束
          if (request.readyState!==4) {
            return
          }
          const {status, statusText} = request
          // 如果成功了, 取出数据封装成成功的响应数据对象response, 调用resolve(response)
          if (status>=200 && status<300) { // 在[200, 300)
            const response = {
              // data: JSON.parse(request.response),
              data: request.response,
              status,
              statusText
            }
            resolve(response)
          } else {
             // 如果失败了, 封装失败相关信息成error对象, 调用reject(error)
             reject(new Error('request error status is ' + status))
          }
        }
        if (method==='GET' || method==='DELETE') {
          // 发送请求
          request.send()
        } else { // POST/PUT
          // 设置请求头
          request.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
          // 发送请求
          request.send(JSON.stringify(data))
        }
      })
    }
2.6.3 使用测试
function testGet() {
  axios({
     url: 'http://localhost:3000/comments',
     // url: 'http://localhost:3000/comments2',
     params: {id: 3},
   }).then(response => {
     console.log('get success', response.data, response)
   }).catch(error => {
     alert(error.message)
   })
 }
 function testPost() {
   axios({
     url: 'http://localhost:3000/comments',
     // url: 'http://localhost:3000/comments2',
     method: 'POST',
     data: { body: 'aaaa', postId: 2 }
   }).then(response => {
     console.log('post success', response.data, response)
   }).catch(error => {
     alert(error.message)
   })
}
 function testPut() {
   axios({
     url: 'http://localhost:3000/comments/3',
     // url: 'http://localhost:3000/comments/39',
     method: 'put',
     data: {body: 'abcdefg', "postId": 2}
   }).then(response => {
     console.log('put success', response.data, response)
   }).catch(error => {
     alert(error.message)
   })
 } 
 function testDelete() {
   axios({
     url: 'http://localhost:3000/comments/1',
     method: 'delete',
     params: {
       body: 'some comment'
     }
   }).then(response => {
     console.log('delete success', response.data, response)
   }).catch(error => {
     alert(error.message)
   })
 }

第3章：axios的理解和使用

3.1 axios是什么?

  1. 前端最流行的ajax请求库
  2. react/vue官方都推荐使用axios发ajax请求
  3. 文档

3.2 axios特点

  1. 基于xhr + promise的异步ajax请求库
  2. 浏览器端/node端都可以使用
  3. 支持请求／响应拦截器
  4. 支持请求取消
  5. 请求/响应数据转换
  6. 批量发送多个请求

3.3 axios常用语法

方法说明
axios(config)通用/最本质的发任意类型请求的方式
axios(url[, config])可以只指定url发get请求
axios.request(config)等同于axios(config)
axios.get(url[, config])发get请求
axios.delete(url[, config])发delete请求
axios.post(url[, data, config])发post请求
axios.put(url[, data, config])发put请求
axios.defaults.xxx请求的默认全局配置
axios.interceptors.request.use()添加请求拦截器
axios.interceptors.response.use()添加响应拦截器
axios.create([config])创建一个新的axios(它没有下面的功能)
axios.Cancel()用于创建取消请求的错误对象
axios.CancelToken()用于创建取消请求的token对象
axios.isCancel()是否是一个取消请求的错误
axios.all(promises)用于批量执行多个异步请求
axios.spread()用来指定接收所有成功数据的回调函数的方法

在这里插入图片描述

3.4 难点语法的理解和使用

3.4.1 axios.create(config)
  1. 根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置
  2. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
  3. 为什么要设计这个语法?
    (1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
    (2) 解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中
拦截器函数/ajax请求/请求的回调函数的调用顺序
  1. 说明: 调用axios()并不是立即发送ajax请求, 而是需要经历一个较长的流程
  2. 流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调
  3. 注意: 此流程是通过promise串连起来的, 请求拦截器传递的是config, 响应拦截器传递的是response
3.4.2 取消请求
  1. 基本流程
    配置cancelToken对象
    缓存用于取消请求的cancel函数
    在后面特定时机调用cancel函数取消请求
    在错误回调中判断如果error是cancel, 做相应处理
  2. 实现功能
    点击按钮, 取消某个正在请求中的请求
    在请求一个接口前, 取消前面一个未完成的请求
axios入门示例代码（带文档教程）
11-07
axios入门示例代码（带文档教程）
Axios 入门教程
若尘的博客
03-03 1706
Axios 入门教程
【Axios 教程】从入门到高级
最新发布
深耕CV
09-12 1198
Axios 是一个开源的、基于 Promise 的 HTTP 客户端库，由 Matt Zabriskie 创建，并于 ​​2014年​​ 在 GitHub 上首次发布。它支持浏览器和 Node.js 环境，主要用于发送 GET、POST 等 HTTP 请求，并处理响应。核心优势简单易用：语法直观，不用手动处理 JSON 转换。自动处理：自动转换请求/响应数据（如 JSON），支持拦截器（中间件）。浏览器兼容：内置对老浏览器的支持（如 IE）。功能丰富：错误处理、请求取消、并发等。
Axios入门使用
ning的博客
09-28 3111
Axios 是一个功能强大且易于使用的 HTTP 客户端，支持多种请求方法、全局配置、拦截器、错误处理和取消请求等功能。通过本文的介绍，相信你已经掌握了 Axios 的基本使用方法，可以在项目中灵活地进行数据交互。希望本文对你有所帮助！版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章Axios（万字详细教程）-优快云博客一文掌握Axios-优快云博客。
axios基础入门教程
专注于技术分享的博主
03-30 1267
一、axios 简介axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js 环境，支持以下特性：发送 HTTP 请求（GET/POST/PUT/DELETE 等）拦截请求和响应自动转换 JSON 数据取消请求并发请求处理二、安装1. 使用 npm/yarn2. 浏览器直接引入三、基本用法1. 发送 GET 请求2. 发送 POST 请求​​​​​​​3. 使用 async/await​​​​​​​四、请求配置1. 全局默认配置​​​​​​​。
axios教程
lllcuigu的博客
10-09 493
);​。
最新版axios入门教程——15.15-axios发送请求过程详解(Av756328321,P15).rar
11-07
这篇最新的 Axios 入门教程深入讲解了 Axios 发送请求的过程，旨在帮助初学者快速掌握这一强大的工具。 首先，我们了解 Axios 的基本用法。在 JavaScript 中，你可以通过 `import` 或 `require` 来引入 Axios。例如...
vue动态引入及axios封装(基础和进阶)---小白入门
前端_小菜鸟的博客
09-02 2946
vue动态引入及axios封装的扩展和总结一.vue基础1.axios的基础用法.2.router的基础用法二.vue的进阶1.axios进阶(1).先看看axios如何进行封装(2).在src目录下面的request目录下创建common.js文件(3).在src目录下创建common文件夹,在此文件夹下面创建api.js,代码如下:2.router进阶(1).修改路由配置,按模块写路由文件(2...
最新版axios入门教程——11.11-axios取消请求(Av756328321,P11).rar
11-07
在提供的压缩包中，"最新版axios入门教程——11.11-axios取消请求(Av756328321,P11).mp4"很可能是一个视频教程，详细讲解了如何使用axios进行取消请求的操作。而"特惠云服务器.url"则可能是一个链接，指向有关优惠云...
2020最新-Vue ElementUi入门实战视频教程.txt
09-26
根据给定文件的信息，我们可以提炼出关于“2020最新-Vue ElementUi入门实战视频教程”的相关知识点。虽然描述部分并未提供具体信息，但从标题和标签中可以明确看出本教程主要围绕Vue.js与Element UI框架展开。接下来...
Axios教程
m0_44982764的博客
11-26 1401
Axios 是一个基于 promise 的 HTTP 库，通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 文档：axios中文文档|axios中文网 | axios 1.传入配置发起请求 　　axios({ 　　　　url: '接口地址', 　　　　method: 'get', // 或者post请求类型 　　　　responseType: 'json', //默认格式json 　　　　data: { 　　　　　　'username' : 'hx', 　　　　
axios快速入门
qq_15901351的博客
01-03 1124
现在的ajax技术已经很好了，但是vue.js中axios方法是vue特有的，这里简单介绍一下。 axios中文文档： https://www.kancloud.cn/yunye/axios/234845 这边博客写的不错：https://www.jianshu.com/p/df464b26ae58 一、简介 axios 是一个基于 Promise 的 HTTP 客户端，专门为浏览器和 ...
Axios的使用教程
m0_46319477的博客
04-28 914
Axios，在服务端它使用原生 node.js模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。网络请求库，作用于node.js。Axios 是一个基于。
Axios使用方法详解，从入门到进阶
热门推荐
青春木鱼的博客
08-16 5万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
最新axios快速入门教程
猿小白的博客
07-26 1307
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。想要使用异步/等待？在外部函数/方法中添加'async'关键字。这里以get请求方式举例说明，其它请求方式类似。将请求参数放到params中。将请求参数拼接到url中。......
axios入门
zlting_的博客
07-26 390
axios入门(笔记)
Axios 简明教程：前端开发必备的 HTTP 客户端
2401_83607690的博客
07-11 960
Axios 是前端开发中不可或缺的工具，通过本教程你已经掌握了：基本 GET/POST 请求并发请求处理创建自定义实例拦截器使用错误处理方法这些知识已经足够应对大部分项目开发需求。记住在实际项目中做好封装和错误处理，会让你的代码更加健壮和易维护。现在就去你的项目中试试 Axios 吧！🚀。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值