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



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