React網(wǎng)絡(luò)請求發(fā)起方法詳細(xì)介紹

更新時間：2022年09月29日 11:40:31 作者：月光曬了很涼快

在編程開發(fā)中，網(wǎng)絡(luò)數(shù)據(jù)請求是必不可少的，這篇文章主要介紹了React網(wǎng)絡(luò)請求發(fā)起方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

1. 發(fā)起網(wǎng)絡(luò)請求

首先需要安裝 axios 庫：

yarn add axios

發(fā)起網(wǎng)絡(luò)請求：

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>
        {
          // 條件渲染
          // 第一次執(zhí)行過來是null，防止報錯就需要加一個判斷
          this.state.users ? <h3>{this.state.users.name}</h3> : <Loading />
        }
      </div>
    )
  }
}
export default App

mock 數(shù)據(jù)：

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

2. 開發(fā)時網(wǎng)絡(luò)請求代理配置

使用create-react-app來創(chuàng)建的react工程，如果有請求跨域，在開發(fā)時的解決方案首先需要新建配置文件 src/setupProxy.js文件，并通過 yarn 安裝 http-proxy-middleware，代理中間件模塊：

yarn add -D http-proxy-middleware

setupProxy.js：

// 此文件是create-react-app創(chuàng)建的工程提供的一個代理網(wǎng)絡(luò)請求文件入口
// 此文件給nodejs調(diào)用，模塊化要使用commonjs
// 修改此文件需要重啟項目
// 實現(xiàn)代理需要安裝 代理中間件模塊 yarn add -D http-proxy-middleware
const { createProxyMiddleware: proxy } = require('http-proxy-middleware')
const userMockFn = require('../mock/user')
// // 內(nèi)置了express
module.exports = app => {
  userMockFn(app)
  // 參數(shù)1：以什么規(guī)則開頭
  app.use('/api', proxy({
    // 目標(biāo)地址
    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>
        {
          // 條件渲染
          // 第一次執(zhí)行過來是null，防止報錯就需要加一個判斷
          this.state.users ? <h3>{this.state.users.name}</h3> : <Loading />
        }
      </div>
    )
  }
}
export default App