快捷導(dǎo)航

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

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

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

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

首先需要安裝 axios 庫：

yarn add axios

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

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，防止報(bào)錯(cuò)就需要加一個(gè)判斷
          this.state.users ? <h3>{this.state.users.name}</h3> : <Loading />
        }
      </div>
    )
  }
}
export default App

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

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

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

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

yarn add -D http-proxy-middleware

setupProxy.js：

// 此文件是create-react-app創(chuàng)建的工程提供的一個(gè)代理網(wǎng)絡(luò)請(qǐng)求文件入口
// 此文件給nodejs調(diào)用，模塊化要使用commonjs
// 修改此文件需要重啟項(xiàng)目
// 實(shí)現(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',
    // 修改主機(jī)頭
    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，防止報(bào)錯(cuò)就需要加一個(gè)判斷
          this.state.users ? <h3>{this.state.users.name}</h3> : <Loading />
        }
      </div>
    )
  }
}
export default App

到此這篇關(guān)于React網(wǎng)絡(luò)請(qǐng)求發(fā)起方法詳細(xì)介紹的文章就介紹到這了,更多相關(guān)React網(wǎng)絡(luò)請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: