react——网络请求

axios

import axios from 'axios'

// 不直接使用axios对象，而且使用它创建的一个新的实例化对象
const instance = axios.create()

// 响应拦截器
instance.interceptors.response.use(
  res => res.data,
  err => Promise.reject(err)
)

// 请求拦截器
instance.interceptors.request.use(config => {
  config.timeout = 10000
  return config
})

/**
 * get请求
 * @param {string} url 请求的url地址
 * @param {object} config 额外的表求头信息的补充，可选
 * @returns Promise
 */
export const get = (url, config = {}) => instance.get(url, config)

/**
 * post请求
 * @param {string} url 请求的url地址
 * @param {object} data 请求体数据，可选 例：{id:1,name:'aaa'}
 * @param {object} config 额外的表求头信息的补充，可选
 * @returns Promise
 */
export const post = (url, data = {}, config = {}) => instance.post(url, data, config)

如果请求网络遇到跨域问题:在src文件夹下面填：
添加一个文件：setupProxy.js

• 此文件给nodejs调用，模块化要使用commonjs
• 此文件是create-react-app创建的工程提供的一个代理网络请求文件入口
• 修改此文件需要重启项目
• 实现代理需要安装 代理中间件模块 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
  }))
}

module.exports = app => {
  app.get('/api/users', (req, res) => {
    res.send([
      { id: 1, name: '张三' },
      { id: 2, name: '英子' },
    ])
  })
}

访问public里面的公共资源：

async componentDidMount() {
	let users = await get('/mock/users.json');
	this.setState({ users });
}

获取通过网络代理得到的数据

async componentDidMount() {
	let users = await get('/api/v1/getNowPlayingFilmList?cityId=110100&pageNum=1&pageSize=10')
	console.log(users)
}

最后

以上就是无聊小懒虫为你收集整理的react——网络请求的全部内容，希望文章能够帮你解决react——网络请求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。