react总结之axios

简介: react总结之axios

一、pandas是什么?

 Axios是一个基于promise的HTTP库,类似于jQuery的ajax,用于http请求。可以应用于浏览器端和node.js,既可以用于客户端,也可以用于node.js编写的服务端


二、axios特性

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF


三、axios使用

首先在项目文件夹下打开cmd命令行输入

npm install axios

在需要的页面里面引入即可使用

import axios from "axios";



axios格式

post请求格式

axios({
        method: "post",
        url: "接口路径", // url
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        data: qs.stringify({}),//参数
      })
      .then(function(res) {
        console.log(res);
      })
      .catch(function(err) {
        console.log(err);// 失败回调
      });

get请求方式

axios({
        method: "get",
        url: "接口路径", // url
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        params:{},//参数
      })
      .then(function(res) {
        console.log(res);
      })
      .catch(function(err) {
        console.log(err);// 失败回调
      });


get和post区别


post请求需要在参数哪里使用qs

GET在浏览器回退时是无害的,而POST会再次提交请求。


GET产生的URL地址可以被Bookmark,而POST不可以。


GET请求会被浏览器主动cache,而POST不会,除非手动设置。


GET请求只能进行url编码,而POST支持多种编码方式。


GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。


qs

qs安装

npm install axios

安装完成后在需要的页面引入即可使用


9835be1a3c8342eaa40955353cad471d.png



相关文章
|
6月前
|
前端开发 JavaScript
React配合axios请求拦截校验session,403跳转至登陆页面
React中使用axios进行请求拦截,通过自定义事件监听和响应拦截实现403状态码时的自动登录页面跳转。
175 2
|
10月前
|
前端开发 JavaScript CDN
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
278 0
|
前端开发 CDN
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
1170 0
|
10月前
|
前端开发 CDN
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
171 0
|
JSON 前端开发 API
React+Axios调用api并且渲染在前端界面
React+Axios调用api并且渲染在前端界面
201 0
|
前端开发
【React】React+TS 前端工程化 Axios二次封装
【React】React+TS 前端工程化 Axios二次封装
685 0
|
5月前
|
资源调度 JavaScript
|
7月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
7月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
5月前
|
缓存 JavaScript 搜索推荐

热门文章

最新文章

  • 1
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    161
  • 2
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    598
  • 3
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    266
  • 4
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    59
  • 5
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    59
  • 6
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    137
  • 7
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    175
  • 8
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    69
  • 9
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    45
  • 10
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    62