axios请求中的data和params的区别

news/2024/11/5 13:14:47 标签: 前端

一、

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

域名：标记访问服务器在互联网中的方位

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

url查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数值2=值2

axios查询参数

语法：使用axios提供的params选项

axios({
    url:'目标资源地址',
    params:{
        参数名：值
    }
})

二、常用请求方式

请求方法操作
get获取数据
post提交数据
put修改数据（全部）
delete删除数据
patch修改数据（部分）

aixos请求配置

url：请求的url网址

method:请求的方法，get可以省略

data:提交数据

axios({
    url:'目标资源地址',
    method:'请求方法',
    data:{
        参数名：值
    }
})

data和params的区别

  • data 用于在发送请求时附带的数据，通常用于 POST、PUT 和 PATCH 等请求方法。

  • 发送的 data 会被作为请求体（request body）发送给服务器。

axios({
  url: 'https://example.com/api/resource',
  method: 'POST',
  data: {
    name: 'John',
    age: 30
  }
});

//简写
axios.post('https://example.com/api/resource', {
  name: 'John',
  age: 30
});

  • params 用于发送 URL 查询参数，通常用于 GET 请求。

  • 这些参数会被附加到 URL 的查询字符串部分。

axios({
  url: 'https://example.com/api/resource',
  method: 'GET',
  params: {
    id: 123,
    sort: 'asc'
  }
});

//简写
axios.get('https://example.com/api/resource', {
  params: {
    id: 123,
    sort: 'asc'
  }
});

请求报文：浏览器按照http协议要求的格式，发送给服务器的内容

(请求行，请求头，空行，请求体)

响应报文：浏览器按照http协议要求的格式，返回给给服务器的内容

（响应行：协议，http响应状态码，状态信息

   响应头：以键值对的格式携带的附加信息，比如：content-type

   空行：分割响应头，空行之后的是服务器返回的资源

   响应体：返回的资源）

http响应状态码

用来表明请求是否成功

404服务器找不到资源

状态码说明
1xx信息
2xx成功
3xx重定向消息
4xx客户端错误
5xx服务器错误

token

token访问权限的令牌，本质上是一串字符串。正确登录后，由后端签发并返回

作用：判断是否有登录状态等，控制访问权限

前端只能判断token有无，后端才能判断token的有效性。

判断有无token，没有强制跳转到登录页；登录成功后，保存token令牌字符串到本地，并跳转到内容页面。

const token =localStorage.getItem('token')
if(!token){
    location.href='../login.html'
}

//登录请求
localStorage.setItem('token'，res.data.data)
setTimeout(()=>{
    location.href='../content.html'
},1500)

axios请求拦截器（携带token)

发起请求前，触发的配置函数，对请求参数进行额外配置

axios.interceptors.request.use((config)=>{
    const token =localStorage.getItem('token')
    token && (config.headers.Authorization=`Bear ${token}`)
    return config
},(error)=>{
    return Promise.reject(error)
})

axios相应拦截器

响应回到then/catch之前，处罚的拦截函数，对响应结果的统一处理。

状态为2xx触发成功回调，其他则触发失败的回调函数

axios.interceptors.response.use((response)=>{
    const result=response.data
    return result
},(error)=>{
    if(error?.response?.status===401){
        alert('token过期')
        localStorage.clear()
        location.href='../login.html'
    }
    return Promise.reject(error)
})

富文本编辑器

带样式，多格式的文本，在前端一般使用标签配合内联样式实现

快速开始 | wangEditor

使用：wangEditor

编辑器函数，创建工具栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <style>
        #editor—wrapper {
          width: 600px;
          border: 1px solid #ccc;
          z-index: 100; /* 按需定义 */
        }
        #toolbar-container { border-bottom: 1px solid #ccc; }
        #editor-container { height: 500px; }
      </style>
</head>
<body>
    <div id="editor—wrapper">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
    </div>
</body>
</html>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    //创建编辑器函数，创建工具栏函数
    const { createEditor, createToolbar } = window.wangEditor
    //编辑器配置对象
    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
          const html = editor.getHtml()
          console.log('editor content', html)
          // 也可以同步到 <textarea>
        }
    }
    //创建编辑器
    const editor = createEditor({
        selector: '#editor-container',//创建的位置
        html: '<p><br></p>',//默认内容
        config: editorConfig,//配置项
        mode: 'default', // or 'simple'
    })

    //工具栏配置对象  
    const toolbarConfig = {}
    //创建工具栏
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })
</script>

上传图片

准备标签结构和样式

选择文件并保存在FormData

单独上传图片并得到图片URL地址

回显并切换img标签（隐藏+号上传标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cover .place{
            width: 200px;
            height: 200px;
            text-align: center;
            font-size: 40px;
            line-height: 200px;
            border:1px solid #ddd;
            color:#aaa;
            cursor:pointer;
            display: inline-block;
            vertical-align: top;
        }
        .cover img{
            width: 200px;
            height: 200px;
            vertical-align: top;
        }
        .cover .rounded{
            display: none;
        }
        .show{
            display: inline-block !important;
        }
        .hide{
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="cover">
        <label for="img">封面：</label>
        <label for="img" class="place">+</label>
        <input type="file" class="img-file" name="img" id="img" hidden>
        <img src="" class="rounded">
    </div>
</body>
</html>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document.querySelector('.img-file').addEventListener('change',async(e)=>{
        const file=e.target.files[0]
        // const fd=new ForemData()
        // fd.append('image',file)
        // //body参数（application/form-data）
        // const res=await axios({
        //     url:'xxxx',
        //     method:'post',
        //     data:fd
        // })
        // console.log('res',res);
        // const imgUrl=res.data.data.url
        // document.querySelector('.rounded').src=imgUrl
        // document.querySelector('.rounded').classList.add('show')
        // document.querySelector('.place').classList.add('hide')
        const objectURL = URL.createObjectURL(file); // 创建临时 URL
        const imgUrl=objectURL
        console.log('imgUrl', imgUrl);
        
        document.querySelector('.rounded').src=imgUrl
        document.querySelector('.rounded').classList.add('show')
        document.querySelector('.place').classList.add('hide')
    })
    //点击ing可以重新切换封面
    document.querySelector('.rounded').addEventListener('click',()=>{
        document.querySelector('.img-file').click()
    })
</script>
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  <style>
    .cover .place{
        width: 200px;
        height: 200px;
        text-align: center;
        font-size: 40px;
        line-height: 200px;
        border:1px solid #ddd;
        color:#aaa;
        cursor:pointer;
        display: inline-block;
        vertical-align: top;
    }
    .cover img{
        width: 200px;
        height: 200px;
        vertical-align: top;
    }
    .cover .rounded{
        display: none;
    }
    .show{
        display: inline-block !important;
    }
    .hide{
        display: none !important;
    }
    #editor—wrapper {
       width: 600px;
       border: 1px solid #ccc;
       z-index: 100; /* 按需定义 */
     }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 300px; }
</style>
</head>
 
<body>
  <form >
    <input type="text" required name="username"><br>
    <input type="password" name="password"><br>
    <div class="cover">
        <label for="img">封面：</label>
        <label for="img" class="place">+</label>
        <input type="file" class="img-file" name="img" id="img" hidden>
        <img src="" class="rounded">
    </div>
    <div id="editor—wrapper"  name="content">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
        <textarea name="content" class="publish-content hide" ></textarea>
    </div>
    <button class="btn">提交</button>
  </form>
 
<script src="./1.form-serialize.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //上传图片
    document.querySelector('.img-file').addEventListener('change',async(e)=>{
        const file=e.target.files[0]
        const objectURL = URL.createObjectURL(file); // 创建临时 URL
        const imgUrl=objectURL
        document.querySelector('.rounded').src=imgUrl
        document.querySelector('.rounded').classList.add('show')
        document.querySelector('.place').classList.add('hide')
    })
    //点击ing可以重新切换封面
    document.querySelector('.rounded').addEventListener('click',()=>{
        document.querySelector('.img-file').click()
    })
    //创建编辑器函数，创建工具栏函数
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
          const html = editor.getHtml()
          console.log('editor content', html)
          document.querySelector('.publish-content').value=html
          // 也可以同步到 <textarea>
        }
    }
    const editor = createEditor({
        selector: '#editor-container',//创建的位置
        html: '<p><br></p>',//默认内容
        config: editorConfig,//配置项
        mode: 'default', // or 'simple'
    }) 
    const toolbarConfig = {}
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })
    //提交
    document.querySelector('.btn').addEventListener('click', async() => {
        const form = document.querySelector('form');
        const data = serialize(form, { hash: true, empty: true });
        data.cover={
          type:1,//封面类型
          images:[document.querySelector('.rounded').src]//封面地址
        }
        console.log(data);
        try{
            const res=await axios({
              url:'',
              method:'post',
              data
            })
            alert('发布成功')
            form.reset()
            location.href='../content.html'
        }catch{
            alert('发布失败')
        }

    })
  </script>
</body>
</html>


http://www.niftyadmin.cn/n/5739505.html

相关文章

VSCode 1.82之后的vscode server离线安装

VSCode 1.82之后的vscode server离线安装

概述 因为今天在公司开发项目的时候&#xff0c;需要离线配置vscode远程开发环境&#xff0c; 根据参考链接1配置了一遍&#xff0c;不管怎么重启&#xff0c;VSCODE都还是提示下载vscode server&#xff0c;后面在官方issue上找到了解决方案 解决方案 修改Remote SSH的配置…
阅读更多...
cuda、pytorch-gpu安装踩坑！！！

cuda、pytorch-gpu安装踩坑！！！

前提&#xff1a;已经安装了acanoda cuda11.6下载 直接搜索cuda11.6 acanoda操作 python版本3.9 conda create -n pytorch python3.9conda activate pytorch安装Pytorch-gpu版本等包 要使用pip安装&#xff0c;cu116cuda11.6版本 pip install torch1.13.1cu116 torchvi…
阅读更多...
深入探讨 Jenkins 中 HTML 格式无法正常显示的现象及解决方案

深入探讨 Jenkins 中 HTML 格式无法正常显示的现象及解决方案

项目场景&#xff1a; 在现代软件开发中&#xff0c;Jenkins 作为一款流行的持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;工具&#xff0c;广泛应用于自动化构建、测试和部署流程。然而&#xff0c;许多用户在使用 Jenkins 时可能会遇到一个棘手的…
阅读更多...
JVM基本结构和垃圾回收机制

JVM基本结构和垃圾回收机制

一、JVM基本结构 Java虚拟机&#xff08;JVM, Java Virtual Machine&#xff09;是Java程序执行的环境&#xff0c;其基本结构可以分为以下几个主要部分&#xff1a; 类加载器子系统&#xff08;Class Loader Subsystem&#xff09;&#xff1a; 负责加载Java类文件到内存中。…
阅读更多...
第七部分：1. STM32之ADC实验--单通道实验

第七部分：1. STM32之ADC实验--单通道实验

主要利用一个模拟量的电位器来实时改变电压值&#xff0c;通过STM32自带的ADC通道来采集这个数据&#xff0c;并打印出来&#xff01; 一句话&#xff0c;学完STM32&#xff0c;我就往南走&#xff0c;我的工资只有5000.~~~~Whappy
阅读更多...
缓存-基础概念

缓存-基础概念

1、缓存的基本思想 缓存的基本思想就是空间换时间&#xff0c;用更多的存储空间来存储一些可能重复使用或计算的数据&#xff0c;从而减少数据的重新获取或计算的时间。空间换时间的例子 索引&#xff1a;将数据库表中的默写列或字段按照一定的排序规则组织成一个单独的数据结…
阅读更多...
人工智能技术在网络安全领域被恶意利用

人工智能技术在网络安全领域被恶意利用

知识图谱 1. 量子信息技术├── 1.1 量子计算│ └── 威胁现有密码学│ └── 抗量子攻击的密码算法├── 1.2 量子通信│ └── 极高的安全性│ └── 量子密钥分发 (QKD)│ └── 检测窃听行为2. 云计算├── 2.1 多…
阅读更多...
Python详细实现快速幂算法

Python详细实现快速幂算法

目录 Python详细实现快速幂算法引言一、快速幂算法的理论基础1.1 幂运算1.2 快速幂算法的基本思想1.3 快速幂算法的时间复杂度 二、Python实现快速幂算法2.1 基本实现代码解析&#xff1a; 2.2 非递归实现代码解析&#xff1a; 2.3 优化&#xff1a;带模运算的快速幂模快速幂算…
阅读更多...
最新文章

Copyright @ 2022~2023