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 CDN
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
React 在 html 中 CDN 引入(包含 useState、antd、axios ....)
130 0
|
8月前
|
前端开发 CDN
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
504 0
|
6天前
|
前端开发 CDN
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
React 在 html 中 CDN 引入(包含useState、antd、axios ....)
68 0
|
6月前
|
JSON 前端开发 API
React+Axios调用api并且渲染在前端界面
React+Axios调用api并且渲染在前端界面
116 0
|
9月前
|
前端开发
【React】React+TS 前端工程化 Axios二次封装
【React】React+TS 前端工程化 Axios二次封装
343 0
|
10月前
|
前端开发 安全 JavaScript
react总结之axios(解决跨域)
react总结之axios(解决跨域)
|
前端开发
React-22:React脚手架配置axios代理
React-22:React脚手架配置axios代理
279 0
React-22:React脚手架配置axios代理
|
6天前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
138 0
|
6天前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
35 0
|
6天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
49 0