react中的axios模块你了解吗

目录
  • 一、react中axios模块的使用
    • 1、基于Promise的HTTP库用在浏览器和node.js中
    • 2、创建XMLHttpRequest对象：
    • 3、在react中安装axios
    • 4、发起不带参数的get请求
    • 5、带参数的get请求
    • 6、post请求：发送表单数据和文件上传
    • 7、put请求
    • 8、delete请求
      • 例如：
  • 总结

一、react中axios模块的使用

1、基于Promise的HTTP库用在浏览器和node.js中

可以提供以下服务：

（1）从浏览器中创建XMLHttpRequest

（2）从node.js创建http请求

（3）支持PromiseAPI

（4）拦截请求和响应

（5）转换请求数据和响应数据

（6）取消请求

（7）自动转换JSON数据

（8）客户端支持防御XSRF

2、创建XMLHttpRequest对象：

该对象是ajax(异步请求)的核心

3、在react中安装axios

npm install axios

4、发起不带参数的get请求

方式一：axios({ methods: 'get', url: '/ulr' }).then(res => {//请求成功后的处理
            console.log(res)
}).catch(err => {//请求失败后的处理
           console.error(err);
})

'res'是服务器返回的响应数据

err是请求失败后的信息

方式二：axios.get('/url').then(res => {
            console.log(res)
}).catch(err => {
           console.error(err);
})

5、带参数的get请求

在服务器端获取请求参数的方式--> req(request).query.参数名

方式一： axios.get('/url', {params: {id: 12}}).then(res => {
              console.log(res)
}).catch(err => {
              console.error(err);
})
//请求的地址实际为：http://localhost:8080/url?id=12
方式二：axios({
               methods: 'get',
               url: 'url',
                params: {
                     id:12    //'id'为参数名
                   }
            }).then(res => {
                   console.log(res)
}).catch(err => {
                   console.error(err);
})

6、post请求：发送表单数据和文件上传

（1）不带参数的post请求

方法一:axios({
        	method:'post',
	        url:'/url'
        }).then(res=>{})
          .catch(err=>{})
方法二:axios.post('url')
		    .then(res=>{})
			.catch(err=>{})

（2）带参数的post请求：在服务器端获取请求参数的方式-->req.body.参数名

服务器端使用req.body.参数名 获取数据
let data = {}
let config = {}
方式一:  axios.post('/url',{id:12}).then(res => {
                   console.log(res)
            }).catch(err => {
                   console.error(err);
            })
方式二:  axios({
              methods: 'post',
              url: '/url',
              data: {id:12}
          }).then(res => {
                console.log(res)
          }).catch(err => {
                console.error(err);
          })

7、put请求

和post请求类似

8、delete请求

（1）可以像get请求一样包装请求参数:在服务器端获取请求参数的方式--req.query.参数名

参数在url的params中：服务器端使用req.query.参数名 获取数据
axios.delete('/url', {
params: {id: 12}  //'id'为参数名
}).then(res => {
                console.log(res)
}).catch(err => {
                console.error(err);
})

（2）可以像post请求一样包装请求参数：在服务器端获取请求参数的方式--req.body.参数名

参数在请求体(post)中 将params改为 data就行：服务器端使用req.body.参数名 获取数据
axios.delete('/url', {
data: {id: 12}  //'id'为参数名
}).then(res => {
                console.log(res)
}).catch(err => {
                console.error(err);
})

强调：axios的响应结构

后台： res.json(result)   //发送了json格式的数据

相当于：{ data: result }

前端： res.data

例如：

后台：

res.json({
    code：1001,
    msg: '小森'
})

 前端：

res.data.code

res.data.msg

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • react axios 跨域访问一个或多个域名问题

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo-web-dev.autel.com", //当然,这里是一个假地址 像这样: 这样跨域便完成了,当然,也可以像网上那样,多几段代码,像这样: 我不知道你们写入这段代码会怎么样,反正我是会报错,具体报错是怎么我这里没办法展示,因为我的项目已经 运行了 npm run eject 这个命令 报错的意思

  • 关于React Native使用axios进行网络请求的方法

    在前端开发中,能够完成数据请求的方式有很多,如Ajax.jQuery ajax.axios和fetch等.不过,随着技术的发展,现在能够看到的基本上也就axios和fetch两种. axios是一个基于Promise的Http网络库,可运行在浏览器端和Node.js中,Vue应用的网络请求基本都是使用它完成的.axios有很多优秀的特性,如支持请求的拦截和响应.取消请求.JSON自动转换.客户端防御XSRF等. 使用axios之前,需要先在项目中安装axios插件,安装命令如下. //npm n

  • react使用axios进行api网络请求的封装方法详解

    react使用axios进行api网络请求的封装方法详解

    目录 前言 准备工作 开始封装axios config.js request.js 进行请求 总结 前言 最近写react项目使用到axios进行请求封装,在这里记录一下,希望可以帮助到初学的小伙伴 准备工作 进行请求需要使用axios,所以要先确定你已经安装完成了axios,查看package.json文件 如果没有,请先安装axios npm install axios 开始封装axios 首先在src目录下新建axios文件夹,这里我们新建两个文件,分别是config.js和request

  • React项目中axios的封装与API接口的管理详解

    目录 前言 安装 引入 环境的切换 请求拦截 响应拦截 api的统一管理 总结 前言 在react项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.如果还对axios不了解的,可以移步axios文档. 安装 //使用npm安装 npm install axios; //使用yarn安装 yarn add axios 引入 在项目

  • React中的axios模块及使用方法

    目录 1 axios介绍 2 使用方法 2.1 在React中安装axios 2.2 get请求 2.3 post请求:发送表单数据和文件上传 2.4 put请求:对数据进行全部更新 2.5 patch请求:只对更改过的数据进行更新 2.6 delete请求:删除请求(参数可以放在url上,也可以和post一样放在请求体中) 1 axios介绍 axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.它可以提供以下服务:1.从浏览器中创建XMLHttpRe

  • react中的axios模块你了解吗

    目录 一.react中axios模块的使用 1.基于Promise的HTTP库用在浏览器和node.js中 2.创建XMLHttpRequest对象: 3.在react中安装axios 4.发起不带参数的get请求 5.带参数的get请求 6.post请求:发送表单数据和文件上传 7.put请求 8.delete请求 例如: 总结 一.react中axios模块的使用 1.基于Promise的HTTP库用在浏览器和node.js中 可以提供以下服务: (1)从浏览器中创建XMLHttpReque

  • React中使用axios发送请求的几种常用方法

    目录 React中安装并引入axios依赖 使用axios进行GET请求 使用axios.get方式 使用axios(config {...}) 使用axios进行POST请求 使用axios.post 使用axios(config {...}) 同时发送多个请求 详细config对象配置项 axios的返回值对象response axios的全局配置 axios的单一实例化配置 axios拦截器的使用 React中安装并引入axios依赖 在React项目中使用axios请求,首先需要安装ax

  • 简单谈谈React中的路由系统

    简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

  • 关于react中组件通信的几种方式详解

    关于react中组件通信的几种方式详解

    前言 刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦,下面这篇文章就来给大家详细介绍下,在开始之前先来看一张图: react组件通信 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息 Child.jsx import React from 'react'; import Pro

  • 浅谈React中组件间抽象

    关于今天要学习的组件间抽象其实我这小白看了几次还没弄明白,这次决定一探究竟.在组件构建中,通常有一类功能需要被不同的组件公用,此时就涉及抽象的概念,在React中我们主要了解mixin和高阶组件. mixin mixin的特性广泛存在于各个面向对象语言中,在ruby中,include关键词就是mixin,是将一个模块混入到另外一个模块中,或者是类中. 封装mixin方法 const mixin = function(obj, mixins) { const newObj = obj newObj

  • 浅谈React中的元素、组件、实例和节点

    React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学(老干部就是其中一员)的好奇心. 元素 (Element) React 元素其实就是一个简单JavaScript对象,一个React 元素

  • 解决vue2中使用axios http请求出现的问题

    使用axios处理post请求时,出现的问题解决 默认情况下: axios.post(url, params).then(res => res.data); 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status code 404 我们需要实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 于是得出

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • 详解React中的todo-list

    基于React的一个简单Todo-list 先赌为快:在线DEMO,感觉还不错点一下star  -_- ~ 源码地址: 一.已经完成的功能 1.新增选项(默认未完成) 2.完成状态可以切换 3.当前选项可以删除 4.全部选项选中状态切换 5.全部个数,完成个数,未完成个数实时读取 6.刷新状态不变 7.双击可以编辑(有个坑:双击编辑内input的keyUp Enter保存会连带触发blur失去焦点保存.已解决:通过设置一个可以保存的状态控制) 二.待完成(新增路由) 三.目录结构 3.1.主要逻

随机推荐