尚硅谷 Ajax与Axios的使用与关键源码 笔记

最新推荐文章于 2024-02-21 15:12:50 发布
最新推荐文章于 2024-02-21 15:12:50 发布
阅读量833 收藏 15
点赞数 2
分类专栏： 前端 文章标签： ajax axios js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liukairui/article/details/117936076
版权
本文详细介绍了Ajax技术，包括原生Ajax的使用、jQuery的Ajax、Axios库的应用以及Fetch API的使用。重点探讨了Ajax的跨域问题，通过JSONP和CORS两种解决方案进行阐述。此外，还深入分析了Axios的源码，包括其目录结构、请求发送函数、请求取消函数和拦截器的实现。最后，通过一个简易版的axios实现，帮助读者更好地理解Ajax的工作原理。
摘要由CSDN通过智能技术生成

文章目录

Ajax概述

Ajax简介：Ajax(Async JavaScript and XML)在网页不刷新的情况下向服务器发送请求，获取响应，实现懒加载的过程

XML简介：XML与HTML类似，都是一种基于标签的标记语言

  • HTML的标签都是预定义的，一般用来描述网页
  • XML没有预定义标签，标签名都是直接写来用的，一般用来存储数据，曾经的Ajax使用XML传输数据

AJAX的优缺点

  • 无需刷新就可以与服务器发送接受请求
  • 可以根据用户的事件动态更新页面内容
  • 没有浏览历史(无法后退)
  • 存在跨域问题(A网站向B网站发送内容)
  • 对SEO优化不友好

HTTP协议(详见计算机网络)
规定了浏览器与万维网服务之间的通信，规定了请求与响应，此处主要了解请求与响应报文的格式与参数

  • 请求报文结构
    • 请求行
      • 请求类型: Get/Post/Put…
      • URL: /xxx?name=zhangsan&passwd=lisi
      • HTTP协议版本: HTTP/1.1…
    • 请求头
      • Host: www.liukairui.cc
      • Cookie: username=admin
      • Content-type: text…
      • User-Agent: Chrome90
    • 空行
    • 请求体
      • 如果是GET请求，那么请求体是空的
      • 如果是POST请求，那么请求体可以是非空的
  • 响应报文结构
    • 响应行
      • HTTP协议版本: HTTP/1.1…
      • 响应状态码: 200…
      • 响应状态字符串: OK
    • 响应头
      • Content-type: text…
      • Content-encoding: gzip
      • Content-length: 1024
    • 空行
    • 响应体: 例如HTML内容

Chrome查看报文

  • F12-Network-选中包
  • 对于GET请求，可以看到
    • Header选项卡中有四个部分
      • General: 请求地址，请求方式，状态码，服务器IP，同源策略
      • Response Headers响应头
      • Request Headers请求头
      • Query String Paramenters将请求url的内容进行解析
    • Response: 响应体
    • Preview: 预览响应体
  • 对于POST请求，可以看到
    • Header选项卡中有四个部分
      • General: 请求地址，请求方式，状态码，服务器IP，同源策略
      • Response Headers响应头
      • Request Headers请求头
      • Query String Parameters: 请求体
    • Response: 响应体
    • Preview: 预览响应体

原生Ajax尝试

Ajax技术可以理解为手动在JS中进行http请求，获取响应报文，根据响应报文修改文件，与之前不同的是，之前是浏览器向服务器发送请求，服务器发送响应，浏览器刷新页面。现在是JS进行请求，JS自己处理结果，我们需要的是一套可以进行Http请求的JSAPI

请求的发送与请求头配置

GET部分

  • 服务端配置
    服务端使用的是NodeJS,我们需要Express处理http请求，其他的都不需要

    const express = require("express")
var app=express()

app.get("/server",(req,res)=>{
     
    // 配置Ajax同源策略，允许跨域访问
    res.setHeader('Access-Control-Allow-Origin','*')
    // 发回响应体
    res.send("Wow Ajax working...")
});

app.listen(,()=>{
     
    console.log("work on");
})

    Node代码实现了收到一个/server请求，发回数据，由于但是没有设置页面的路由，我们需要手动打开网页

  • HTML页面

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button>发送AJAX</button>
    <div class="result" style="border:solid;width: 200px;height: 200px;"></div>
</body>
<script>
    // 选择元素
    const btn = document.querySelector("body > button")
    var txtbox = document.querySelector(".result")
    // 绑定事件
    btn.onclick=function(){
       
        // 创建对象
        const xhr = new XMLHttpRequest();
        // 初始化对象http不可以省略
        xhr.open('GET',"http://127.0.0.1:9000/server")
        // 发送请求
        xhr.send();
        // 当xhr状态发生改变的时候时间
        // readystate表示状态分别是
        // 0: 没有初始化,1: open结束, 2: send结束, 3: 收到部分结果, 4: 收到所有结构
        xhr.onreadystatechange = function(){
       
            if(xhr.readyState===4 && xhr.status >= 200 && xhr.status < 300){
       
                // 打印测试内容
                console.log(xhr.status);        // 状态码
                console.log(xhr.statusText);    // 状态字符
                console.log(xhr.getAllResponseHeaders());   // 响应头 
                console.log(xhr.response);      // 响应体
                // 修改元素
                txtbox.innerHTML=xhr.response
            }
        }
    }
</script>
</html>

  • 总结
    我们使用Ajax实际上就是使用了一系列JS的API,包括四个步骤

    • const xhr = new XMLHttpRequest();创建一个Ajax请求
    • xhr.open('GET',"http://127.0.0.1:9000/server")初始化一个Ajax对象
    • xhr.send();发送这个对象
    • xhr.onreadystatechange绑定对象变化进行操作

    我们有几个变量表示对象状态

    • xhr.readystate: 0: 没有初始化,1: open结束, 2: send结束, 3: 收到部分结果, 4: 收到所有结构
    • xhr.status: 响应状态码
    • xhr.statusText: 响应状态字符
    • xhr.getAllResponseHeaders: 响应头
    • xhr.response: 响应体

POST部分

  • 服务端设置
    app.post("/",(req,res)=>{
     
  res.setHeader('Access-Control-Allow-Origin','*')
  res.send("OK");
});
    服务端只是把get修改为了post
  • HTML设置
    事件监听函数内部修改
    const xhr = new XMLHttpRequest();
xhr.open('POST', "http://127.0.0.1:9000");
// 我们在这里配置我们需要发送的信息
xhr.send('user=Liu&passwd=hey');
xhr.onreadystatechange = function () {
     ...}

设置请求头

  • 设置预定义的请求头
    只需要在请求处进行修改，例如
    xhr.open(...)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(...)
  • 自定义请求头
    在HTML部分
    xhr.open(...)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('defMe', 'LiuKaieui')      // 举例，参数分别是键值
xhr.send(...)
    此时，出于浏览器安全设置，我们无法发送包，并报错数据头，我们需要修改服务端
    app.all("/",(req,res)=>{
           // 其次，由于浏览器会使用get校验服务器权限，所以必须写Get方法，我们直接写成all
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')   // 首先要修改这里，支持所有头
    res.send("OK");
});

JSON支持

我们希望服务端向网页传送一个对象，但是默认是不支持的，很容易想到的方法就是服务端把对象转换为JSON,客户端讲JSON字符串转化为对象，有两种方法实现

  • 手动实现
    服务端只需要讲对象转换为JSON传出即可
    app.all("/json-server",(req,res)=>{
     
  let tmp = {
     "name": "Liu","Age": 12};
  res.setHeader('Access-Control-Allow-Origin','*')
  res.send(JSON.stringify(tmp));// 实际上不stringfy也可以
});
    网页只需要把收到的对讲转化为对象就可以了(事件监听内部)
    const rxh=new XMLHttpRequest();
rxh.open("POST","http://127.0.0.1:9000/json-server")
rxh.send();
rxh.onreadystatechange=function(){
     
    if(rxh.readyState===4 && rxh.status >=200 && rxh.status <300){
     
        console.log(JSON.parse(rxh.response));
    }
}
  • 设置响应头实现
    设置响应类型后，我们就不需要手动转换了，浏览器收到JSON字符串后会自动转换，reponse就是一个对象
    const rxh=new XMLHttpRequest();
rxh.responseType='json';     // 设置响应类型，无需设置header
rxh.open("POST","http://127.0.0.1:9000/json-server")
rxh.send();
rxh.onreadystatechange=function(){
     
    if(rxh.readyState===4 && rxh.status >=200 && rxh.status <300){
     
        console.log(rxh.response);
    }
}

IE缓存问题

IE(10-)会对Ajax的请求结果进行缓存，会导致下次Ajax请求得到缓存的结果，IE根据请求的url/body进行判断是否使用缓存，我们只需要在请求的时候加一个时间戳("...?t="+Date.now()),很多工具都自动实现了这个功能

请求的取消与重发

超时自动取消

可以制定获取请求的最长时间，超时后浏览器会自动取消请求。方法设置XMLHttpRequest的属性：.timeout: 网络超时时间(ms)，.ontimeout: 超时回调函数函数名, .onerror: 网络错误回调函数名

  • 设置服务器, 我们设置一个2000ms的延迟模拟网络延时
    app.get("/",(req,res)=>{
     
  res.setHeader('Access-Control-Allow-Origin','*')
  setTimeout(()=>{
     res.send("You Get Response")},3000);
})
  • 设置Ajax函数(事件内部的部分)
    var hrx = new XMLHttpRequest();
  // 设置超时时间，设置为2000ms的时候必然超时，4000应该不超时
  hrx.timeout=4000;
  // 超时回调函数
  hrx.ontimeout=()=>{
     alert("Network Too Slow")}
  // 网络错误回调函数
  hrx.onerror=()=>{
     alert("Network ERROR")}
  // 之后一切正常
  hrx.open("GET","http://127.0.0.1:9000");
  hrx.send();
  hrx.onreadystatechange=function(){
     
      if(hrx.readyState === 4 && hrx.status >= 200 && hrx.status < 300){
     
          txtBox.innerHTML=hrx.response
      }
  }

手动取消请求

  hrx.abord();

就可以直接取消

Ajax 重新发送请求

我们应该设置用户连点的时候取消上一次的请求以减小服务器压力，只要设置一个flag标记是否正在发送即可

jQuery的Ajax

  • jQuery有三个函数实现Ajax请求，分别是$.get(),$.post(),$.ajax()
  • $.get()与$.post()类似，调用方法是
      $.get(
    url链接,
    {
     要发送的对象},
    (d)=>{
     收到对象的回调函数, d是获取的内容},
    "JSON"/"xml"/"html"/"text"/"script"/"json"/"jsonp" //收到数据的类型，例如这里如果写了"JSON",那么服务器发送JSON字符串，这边收到后会自动转换为对象
  )
  • $.ajax()是一个通用的方法
    $.ajax({
                                     // 所有的参数一起是一个对象
    url:"http://127.0.0.1:9000",        // 请求链接
    data:{
     "a":100,"b":200},             // 传输数据对象
    type:"GET",                         // 传输方式
    dataType:"JSON",                    // 数据类型
    success: (d)=>{
     console.log(d)},     // 成功回调函数
    error:()=>{
     console.log("ERR")},     // 失败回调函数
    timeout:2000,                       // 超时时间
    headers:{
                                // 请求头 可以是标准的，也可以是自定义的
        A:100                           // 如果是自定义的要在服务端进行设置，见`使用原生...>设置请求头>自定义请求头`
    }   
})
    参数还有很多，详见文档

get/post使用简单，ajax功能多，按情况使用即可

使用Axios发送Ajax[简易]

是一个热门的AJAX请求库,支持promise, 支持NodeJS,支持取消请求,支持拦截器,简易的使用方式是

axios.get("http://127.0.0.1:9000",{
      // 请求地址是一个单独的参数
    params:{
                             // 请求的参数，也就是.com?A=1&b=2那部分，使用Axios你可以不用拼串
        id:100,
        un:7
    },
    headers:{
                            // 自定义请求头
        name: 123
    },
});

获取请求结果是要使用Promise直接then(), Axios进行post的时候还可以使用params进行链接定制，但是参数列表有所不同axios.post(url,{data对象},{参数对象})

也可以使用axios函数直接发送

// 发送 POST 请求
axios({
   
  method: 'post',
  url: '/user/12345',
  data: {
   
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

详见官方文档

使用fetch发送请求

fetch是一个window的对象，可以发送Ajax请求，返回一个Promise对象，fetch是前端发展的一种新技术产物。可以简单的理解为是XMLHttpRequest的参数简化版

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。fetch代表着更先进的技术方向，但是目前兼容性不是很好，在项目中使用的时候得慎重。

格式是fetch(input[, init]);

  • input写url/requert对象
  • init写配置对象，有(详见文档)
    • method: 请求使用的方法，如 GET、POST。
    • headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
    • body: 请求的 body 信息：可能是一个 Blob、BufferSource (en-US)、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
    • mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
fetch('http://example.com/movies.json')
  .then(function(response) {
   
    return response.json();
  })

在使用fetch的时候需要注意：

  • 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
  • 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

Ajax跨域

同源策略是网景提出的浏览器安全策略，他要求Ajax请求的网页与目标服务器url,端口,协议是一致的，Ajax默认遵守这个策略，违背同源就是跨域

JSONP解决跨域问题

JSONP是一个非官方的跨域解决方案，只支持GET请求，利用了<script>标签的特性实现跨域，HTML的很多标签本身就是支持跨域的，例如<img>，<script>会引用外部的文件

首先要在浏览器中定义一个函数用于更新内容，例如我想在跨域请求后将结果更新到#box上

function process_JSONP(t){
   
  $("#box").text(t)
}

跨域被请求端设置(请求端为127.0.0.1)

app.get("/jsonp-server",(req,res)=>{
   
  str = JSON.stringfy({
   "name":"我是一个被请求的对象"})
  res.send(`process_JSONP(${
     str})`);        // JS拼串
})

请求端在process_JSONP定义后引用JS

<script src="http://127.0.0.1/jsonp-server">

这样，服务端返回字符串被当作了js,执行了process_JSONP()命令,对网页进行了更新

原生JSONP实例

我们想要实现的功能是，点击#A，浏览器发送跨域请求，服务器发送结果，收到结果后，如果是true,更新.stat背景色为绿色，否则为红色

前端JS设置

function process_jsonp(stat){
        // 获取后的处理函数
    if(stat)document.querySelector(".stat").style = "background-color:#bfa;"
    else document.querySelector(".stat").style = "background-color:#f11;"
}
btnA = document.querySelector("#A");
btnA.onclick=()=>{
   
    const jsLab = document.createElement("script");     // 创建一个script标签
    jsLab.src = "http://127.0.0.1:9000/jsonp";          // 设置一个script标签的src
    document.body.appendChild(jsLab)                    // 将script标签添加到网页
}

后端只返回true

因为我们只能写url,不能指定请求头，请求体，我们只能实现get请求

jQuery实现JSONP实例

jQuery的get/post函数默认当然是不支持跨域的，但是jQuery还有一个getJSON函数，这个函数本来是用来请求JSON，但是这个函数在jQuery底层实现的时候是先对参数的url进行解析，然后使用了上面这种script标签的方法获取JSON对象，所以这个方法是支持跨域的，我们可以利用这个特性。

首先了解函数功能，参数列表是getJSON(url,callbackFunction)，当函数发现url字符串有callback=?，他会自动替换成callback=一个字符串，之后jQuery会注册一个名字叫这个字符串的方法，这个方法内容就是第二个参数于是我们利用这个特性实现JSONP

我们的目标是： 前端点击#A，后端发回消息，前端将.stat的内容替换为响应结果

前端代码

$("#A").click(()=>{
   
  $.getJSON("http://127.0.0.1:9000/jsonp?callback=?",(d)=>{
        // 这里callback=?会在请求的时候被替换
    $(".stat").text(d)
  })
})

后端代码

app.get("/jsonp",(req,res)=>{
   
  let cb = req.query.callback;          // 获取请求中的随机子复查u年
  res.send(`${
     cb}("Wow You Get!")`);    // 调用函数
})

当然这个方法是不适合大量数据请求的

CORS解决跨域问题

CORS(Cross-Origin Resource Sharing,跨域资源共享)是一种官方的跨域解决方案，不需要在客户端进行任何操作，在服务端进行修改就可以直接支持get/post

只需要在服务器上加上响应头Access-Control-Allow-Origin: *即可，如果想要设置允许特定的跨域请求，例如只允许127.0.0.1:5050的，那么只需要修改为Access-Control-Allow-Origin: 127.0.0.1:5050

实例

#btnB点击console显示获取的跨域结果

前端JS

btnB.onclick = ()=>{
   
  const xhr = new XMLHttpRequest();
  xhr.open("GET","http://127.0.0.1:9000/jsonp");
  xhr.send();
  xhr.onreadystatechange=()=>{
   
    if(xhr.readyState === 4 && xhr.status >=200 && xhr.status<300)
      console.log(xhr.response)
  }
}

后端JS

app.get("/jsonp",(
最低0.47元/天 解锁文章
Liukairui
关注
专栏目录
尚硅谷axios笔记——入门学习
weixin_53317758的博客
11-26 1295
取消请求，axios的基本使用、拦截器、axios.get、axios.post、设置请求体等等
ajax尚硅谷笔记——跨域请求、axios发送ajax请求、jquery发送ajax请求
weixin_53317758的博客
11-21 2157
script标签作为函数被服务调用，其中加上该函数的参数作为用户需要看到的数据内容
Ajax与Axios学习笔记（一）
m0_45052521的博客
11-11 656
目录 一、Ajax特点 二、HTTP协议 1.请求报文 1.1请求行 1.2请求头 1.3请求空行（necessary） 1.4请求体 2.响应报文 3.get请求 4.post请求 三、原生Ajax 1.express基本使用 2.ajax请求基本步骤 3.ajax方式get请求 4.ajax发送post请求 5.服务端响应json数据 6.IE浏览器缓存问题 7.网络异Ajax请求超时与常处理 8.取消请求 四、axios 1.axios的配置 2.get的.
axios笔记
Xlslq123的博客
04-08 176
json-server搭建REST接口 1.安装json-server npm install -g json-server 2.创建db.json 3.启动 json-server --watch db.json 1.第 1 章：axios 的理解和使用 XMLHttpRequest): 创建XHR对象的构造函数 status: 响应状态码值,比如200, 404 statusText: 响应状态文本 readyState: 标识请求状态的只读属性 0: 初始 1: open()之.
尚硅谷ajax视频源码
08-17
尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码尚硅谷ajax视频源码
尚硅谷Web前端axios入门与源码解析学习笔记
m0_62516225的博客
11-09 659
尚硅谷Web前端axios入门与源码解析学习笔记
~【笔记】尚硅谷Ajax笔记~
weixin_55935744的博客
11-02 1591
点击通往->尚硅谷Ajax视频. 尚硅谷Ajax笔记 & 目录：
react 使用ajax axios,react中使用Ajax请求（axios，Fetch）
weixin_42515841的博客
08-06 1325
React本身只关注于界面, 并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互(json数据)，可以使用集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node服务器端fetch: 原生函数, 但...
b站视频-尚硅谷Web前端axios从入门到源码分析-笔记
weixin_44286392的博客
07-12 1592
b站尚硅谷强哥axios视频笔记-从入门到源码分析
axios笔记(一) 简单入门
赤蓝紫の博客
03-10 3309
axios笔记(一) 前置知识 又是前端必备知识的笔记。 HTTP 之前的笔记：HTTP笔记 | 赤蓝紫 (clz.vercel.app) 1. 介绍 HTTP是一种能够获取如 HTML 这样的网络资源的protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。 文档：HTTP 2. HTTP请求交互的基
Axios笔记（完结版）
sokoooo的博客
02-08 2332
一、基本知识 1. 特点 1）在浏览器端能发送ajax请求； 2）能在node.js中发送http请求； 3）支持promise的相关操作（API）； 4）请求和响应的拦截器（能在请求之前做一些准备工作，在响应回来后对响应的结果做一些处理）； 5）对请求和响应的数据做转换； 6）取消请求； 7）自动将结果转换成json格式数据； 8）保护作用阻止XSRF攻击 2. 安装 1）使用npm（包管理工具）最后通过打包工具引入（项目使用） $ npm install axios 2）使用b
AJAX介绍
09-02 1671
AJAX 1.什么是Ajax Ajax的技术的产生 Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. “Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Ap
JavaWeb项目之尚硅谷书城：（三）Ajax
sd_960614的博客
07-18 378
Ajax
axios（尚硅谷）
毕业才是起点
08-06 2884
web前端axios技术
axios(尚硅谷)
苏不易染的博客
01-11 220
axios（尚硅谷）
尚硅谷ajax视频教程2
weixin_33933118的博客
04-19 275
7、7. 尚硅谷_佟刚_Ajax_典型应用_验证用户名是否可用 整个项目的目录路径如下所示 我们首先新建立一个web工程，在webroot下面新建立一个script的文件夹，导入jquer文件 接下来我们编写index.jsp文件，通过ajax的方式校验该用户名是否在后台已经被注册 index.jsp文件内容如下所示： <%@ page language="java" im...
（Ajax）axios源码简析（二）——Axios类与拦截器
weixin_34343308的博客
08-27 176
传送门： axios源码简析（一）——axios入口文件 axios源码简析（二）——Axios类与拦截器 axios源码简析（三）——请求与取消请求 Axios.prototype.request Axios类的构造函数： // /lib/core/Axios.js function Axios(instanceConfig) {...
【axios】尚硅谷Web前端axios入门与源码解析
qq_37581764的博客
11-08 177
json-server搭建http服务器在线文档: https://github.com/typicode/json-server1、全局下载json-server2、json文件db.json文件"posts": ["id": 1,},"id": 2,],"id": 1,],3 启动json-server，在命令行窗口启动安装失败，这节就当理论课听吧。到p2 4:30。axios是基于promise的HTTP客户端（client），可以在浏览器和node.js环境中运行。
【汇总笔记】axios的四种请求方式及参数设置
最新发布
Thea12138的博客
02-21 1万+
url (string): 请求的 URL 地址。data (any): 请求的数据。params (object): 请求的查询参数对象。headers (object): 请求头对象。timeout (number): 请求超时时间。withCredentials (boolean): 是否携带跨域请求的凭证。cancelToken (CancelToken): 用于取消请求的 CancelToken 对象。responseType (string): 响应数据的类型。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Liukairui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值