React网络请求发起方法详细介绍

目录
  • 1. 发起网络请求
  • 2. 开发时网络请求代理配置

1. 发起网络请求

首先需要安装 axios 库：

yarn add axios

发起网络请求：

import React, { Component } from 'react'
import { get } from './utils/http'
import Loading from './components/Loading'
class App extends Component {
  state = {
    users: null
  }
  async componentDidMount() {
    let users = await get('/mock/users.json')
    this.setState({ users })
  }
  render() {
    return (
      <div>
        {
          // 条件渲染
          // 第一次执行过来是null，防止报错就需要加一个判断
          this.state.users ? <h3>{this.state.users.name}</h3> : <Loading />
        }
      </div>
    )
  }
}
export default App

mock 数据：

{
  "id": 1,
  "name": "张三"
}

2. 开发时网络请求代理配置

使用create-react-app来创建的react工程，如果有请求跨域，在开发时的解决方案首先需要新建配置文件 src/setupProxy.js文件，并通过 yarn 安装 http-proxy-middleware，代理中间件模块：

yarn add -D http-proxy-middleware

setupProxy.js：

// 此文件是create-react-app创建的工程提供的一个代理网络请求文件入口
// 此文件给nodejs调用，模块化要使用commonjs
// 修改此文件需要重启项目
// 实现代理需要安装 代理中间件模块 yarn add -D http-proxy-middleware
const { createProxyMiddleware: proxy } = require('http-proxy-middleware')
const userMockFn = require('../mock/user')
// // 内置了express
module.exports = app => {
  userMockFn(app)
  // 参数1：以什么规则开头
  app.use('/api', proxy({
    // 目标地址
    target: 'https://api.iynn.cn/film',
    // 修改主机头
    changeOrigin: true
  }))
}

App.jsx：

import React, { Component } from 'react'
import { get } from './utils/http'
import Loading from './components/Loading'
class App extends Component {
  state = {
    users: null
  }
  async componentDidMount() {
    let users = await get('/api/v1/getNowPlayingFilmList?cityId=110100&pageNum=1&pageSize=10')
    console.log(users)
  }
  render() {
    return (
      <div>
        {
          // 条件渲染
          // 第一次执行过来是null，防止报错就需要加一个判断
          this.state.users ? <h3>{this.state.users.name}</h3> : <Loading />
        }
      </div>
    )
  }
}
export default App

到此这篇关于React网络请求发起方法详细介绍的文章就介绍到这了,更多相关React网络请求内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解React Native网络请求fetch简单封装

    在原生应用开发中,为了方便业务开发人员使用,我们一般会对网络库进行一些上传封装,而不是直接使用,例如基于AFNetworking库的iOS请求上层封装,Android的诸如volley,retrofit等.在前端开发中,一般使用fetch进行网络请求,相关介绍请查看fetch示例.其实对于开发来说,系统提供的fetch已经够用了,但是为了代码的整体结构,建议对fetch进行简单的Get/Post封装. 若不封装,我们看一下传统的写法: fetch('http://www.pintasty.cn/

  • React Native 使用Fetch发送网络请求的示例代码

    我们在项目中经常会用到HTTP请求来访问网络,HTTP(HTTPS)请求通常分为"GET"."PUT"."POST"."DELETE",如果不指定默认为GET请求. 在项目中我们常用到的一般为GET和POST两种请求方式,针对带参数的表单提交这类的请求,我们通常会使用POST的请求方式. 为了发出HTTP请求,我们需要使用到 React Native 提供的 Fetch API 来进行实现.要从任意地址获取内容的话,只需简单地

  • 关于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网络请求发起方法详细介绍

    React网络请求发起方法详细介绍

    目录 1. 发起网络请求 2. 开发时网络请求代理配置 1. 发起网络请求 首先需要安装 axios 库: yarn add axios 发起网络请求: import React, { Component } from 'react' import { get } from './utils/http' import Loading from './components/Loading' class App extends Component { state = { users: null }

  • PHP实现网络请求的方法总结

    PHP实现网络请求的方法总结

    一.分析php发送网网络请求的方法 对于php发送网络请求,我们最常用的请求就是curl,有时我们也会用到file_get_contents函数发送网络请求,但file_get_contents只能完成一些间单的网络请求,稍复杂的就无法完成,例如文件上传,cookies,验证,表单提交等,用php的curl可以使用URL的语法模拟浏览器来传输数据,因为它是模拟浏览器,因此它同样支持多种协议,FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及

  • React State与生命周期详细介绍

    React State与生命周期详细介绍

    目录 一.State 1.1 类组件中的State 1.2 函数组件中的State 二.React生命周期 2.1 挂载 2.2 更新 2.3 卸载 2.4 函数式组件useEffect 三.总结 一.State 在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中.在这个时候不需要你操作任何DOM.这和vue中组件的data中的数据是相似的. 1.1 类组件中的State <!DOCTYPE html> <html lang="en"&

  • SpringBoot静态资源的访问方法详细介绍

    SpringBoot静态资源的访问方法详细介绍

    目录 一. 静态资源 二. 静态资源访问目标 三. 静态资源访问前缀 1. 默认访问路径为 / 2. 配置访问前缀 3. 配置静态资源默认访问位置 四. 欢迎页及网页图标设置 1. 欢迎页的设置 2. 网页图标的设置 分析源码 一. 静态资源 在web场景中的静态图片.html网页等 二. 静态资源访问目标 在SpringBoot中,静态资源访问目标有 resources文件下的 public.resources.static 以及 META-INF 文件夹下的 recources 如下图所示:

  • SpringCloud Gateway DispatcherHandler调用方法详细介绍

    SpringCloud Gateway DispatcherHandler调用方法详细介绍

    目录 前言 DispatcherHandler类声明 handle方法 最后总结一下 前言 之前几节我们分析了请求是如何调用到HttpWebHandlerAdapter的,然后再调用到DispatcherHandler中,通过handle方法来处理具体的请求. DispatcherHandler的注入在自动装配那一节已经说过了,忘记的同学可以重新会看一下. DispatcherHandler类声明 public class DispatcherHandler implements WebHand

  • Vue简单封装axios网络请求的方法

    Vue简单封装axios网络请求的方法

    目录 Vue简单封装axios网络请求 一.utils下的httpUtils.js: 二./api下的path.js: 三./api下的index.js: 四.组件中引入并请求: Vue简单封装axios网络请求 一.utils下的httpUtils.js: import axios from 'axios'; import querystring from 'querystring'; const errorHandler = (status, info) => { switch(status

  • Android中imageview.ScaleType使用方法详细介绍

    Android中imageview.ScaleType使用方法详细介绍 ScaleType属性用以表示显示图片的方式,共有8种取值: ScaleType.CENTER:图片大小为原始大小,如果图片大小大于ImageView控件,则截取图片中间部分,若小于,则直接将图片居中显示. ScaleType.CENTER_CROP:将图片等比例缩放,让图像的短边与ImageView的边长度相同,即不能留有空白,缩放后截取中间部分进行显示. ScaleType.CENTER_INSIDE:将图片大小大于Im

  • Android 使用jarsigner给apk签名的方法详细介绍

    Android 使用jarsigner给apk签名的方法详细介绍

    Android 使用jarsigner给apk签名的方法详细介绍 工作中APP功能完成以后往往需要往应用商店提交一些内容,如商店中存在本公司别的人员提交的APP,往往需要进行认领,应用商店会让开发者下载空的APK,然后使用自己APP的签名文件进行签名,认证,这里简单说一下如何使用jarsigner命令进行签名. 该arsigner命令在jdk中可以找到, 简单说明一下具体参数: -verbose:签名命令标识符. -keystore:后面跟着的是你签名使用的密钥文件(keystore)的绝对路径

  • 重写hashCode()和equals()方法详细介绍

    重写hashCode()和equals()方法详细介绍

    hashCode()和equals()方法可以说是Java完全面向对象的一大特色．它为我们的编程提供便利的同时也带来了很多危险．这篇文章我们就讨论一下如何正解理解和使用这2个方法． 如何重写equals()方法 如果你决定要重写equals()方法,那么你一定要明确这么做所带来的风险,并确保自己能写出一个健壮的equals()方法．一定要注意的一点是,在重写equals()后,一定要重写hashCode()方法．具体原因稍候再进行说明． 我们先看看 JavaSE 7 Specification中

随机推荐