专栏首页地方网络工作室的专栏React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件

React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件

版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/FungLeo/article/details/80841241

React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件

React 入门系列教程导航

React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 React + webpack 开发单页面应用简明中文文档教程(二)创建项目 React + webpack 开发单页面应用简明中文文档教程(三)目录说明以及调整项目构架文件 React + webpack 开发单页面应用简明中文文档教程(四)调整项目文件以及项目配置 React + webpack 开发单页面应用简明中文文档教程(五)配置 api 接口请求文件 React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件 React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件、父组件给子组件传值 React + webpack 开发单页面应用简明中文文档教程(八)Link 跳转以及编写内容页面 React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值 React + webpack 开发单页面应用简明中文文档教程(十)在 jsx 和 scss 中使用图片 React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行


我们的项目大多数情况下,是需要和服务端进行交互的。因此,我们需要一个接口请求文件,这里,我们的接口调用,按照老习惯,还是请求 cnodejs.org 提供的公用接口。接口文档查看,请点击 https://cnodejs.org/api

配置代理

react 的代理配置相比 vue 的配置,要简单很多。

我们打开 package.json 文件,在最下面加上

,
"proxy": "https://cnodejs.org/"

如上图所示,我们就配置好了。

注意,配置了代理之后,我们的项目需要重启,才能生效。我们用 command + c 停止运行,然后再输入 npm start 重新运行项目。

linux 和 windows 是 ctrl + c 停止终端运行。

配置 tool/api.js 文件

我们将我们的接口请求配置文件存放于 tool/api.js 这个位置,我们填写以下内容:

虽然这个文件比较长,但是还请仔细研究一下,确保搞懂。

var root = '/api/v1'
var request = require('superagent')
function dataType(data) { // 获取数据类型
  return ({}).toString.call(data).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
function filterNull(o) { // 过滤值为null的请求参数数据
  for (var key in o) {
    if (o[key] === null) {
      delete o[key]
    }
    if (dataType(o[key]) === 'string') {
      o[key] = o[key].trim()
      if (key === 'asset_id') {
        o[key] = +o[key]
      }
      if (o[key].length === 0) {
        delete o[key]
      }
    } else if (dataType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (dataType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}
function ajaxAgent(method, url, params, success, failure) { // 发送请求并得到响应
  if (!navigator.onLine) {
    return
  }
  var r = request(method, url).type('application/json').withCredentials()
  if (params) {
    params = filterNull(params)
    if (method === 'POST' || method === 'PUT') {
      if (dataType(params) === 'object') {
        params = JSON.stringify(params)
      }
      r = r.send(params)
    } else if (method === 'GET' || method === 'DELETE') {
      r = r.query(params)
    }
  }
  r.end(function (err, response) {
    if (err) {
      if (failure) {
        failure({ data: err.name + ': ' + err.message, http_status: response.status }, response, 'HTTP_ERROR') // err, res, esta
      } else {
        console.log('网络连接出错,请稍后重试')
      }
    } else {
      // 这里的判断条件,需要和后端进行确认,这里使用的是 cnodejs.org 的规则
      if (response.body.success === true) {
        if (success) {
          success(response.body, response) // rdata, res
        }
      } else {
        if (failure) {
          failure(response.body, response, 'STATUS_ERROR') // err:, res, esta
        } else {
          console.log(response.body.return_msg)
        }
      }
    }
  })
}
function testRequestParams(method, url, params, success, failure) { // 验证请求时,传递的参数
  if (Object.prototype.toString.call(success) !== '[object Function]') {
    try {
      throw new Error('成功的回调函数位置接受的是一个Function,但是却得到一个' + dataType(success))
    } catch (e) {
      console.error(e)
      return
    }
  }
  if (failure) {
    if (Object.prototype.toString.call(failure) !== '[object Function]') {
      try {
        throw new Error('失败的回调函数位置接受的是一个Function,但是却得到一个' + dataType(failure))
      } catch (e) {
        console.error(e)
        return
      }
    }
  }
  if (Object.prototype.toString.call(params) === '[object Object]' || params === null) {
    return ajaxAgent(method, url, params, success, failure)
  } else {
    try {
      throw new Error('接受的是一个对象或者为空(即null),但是却得到一个' + dataType(params))
    } catch (e) {
      console.error(e)
    }
  }
}
export default {
  get: function (url, params, success, failure) {
    testRequestParams('GET', root + '/' + url, params, success, failure)
  },
  post: function (url, params, success, failure) {
    testRequestParams('POST', root + '/' + url, params, success, failure)
  },
  put: function (url, params, success, failure) {
    testRequestParams('PUT', root + '/' + url, params, success, failure)
  },
  delete: function (url, params, success, failure) {
    testRequestParams('DELETE', root + '/' + url, params, success, failure)
  },
  root() {
    return root
  },
  filterNull
}

这里,我们使用了 superagent 这个接口请求工具,因此,我们需要安装这个这个工具:

npm i superagent

测试一下是否正常

我们的配置文件配置完成之后,我们编辑 page/site/index.jsx 这个文件,在里面尝试请求一下,看看是否能够请求到数据。

内容如下:

import React, { Component } from 'react'
import Api from '@/tool/api.js'

export default class Index extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }

  componentDidMount () {
    Api.get('topics', null, r => {
      console.log(r)
    })
  }

  render () {
    return (
      <div className="outer home">
        indexPage
      </div>
    )
  }
}

根据这段代码,控制台按照我们的需要,打印出了以下内容。说明我们的配置成功了。

componentDidMount 是说组件加载时执行,更多内容,请搜索 react 生命周期 查看相关内容。 如果是初次接触 react 肯定对上面的代码云里雾里,不知所云。但是,这根本就不重要,重要的是项目跑起来,跑起来之后,我们可以慢慢的把这些未知的问题全部搞定。临渊羡鱼不如退而结网。站在河边是学不会游泳的。 现在你要做的就是,复制,粘贴,跑起来,成功了,欧耶!

本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 打造基于百度翻译的命令行翻译工具

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件 前情回顾 在上一篇《Vue2...

    FungLeo
  • vue3.0 Composition API 上手初体验 函数组件的开发与使用

    在上一节中,我们讨论了普通组件的开发与使用,其实相比较 vue 2.0 来说,差别并不大。

    FungLeo
  • gh0st源码分析与远控的编写(二)

    上次说了那么多,基本上就是一个叫“大局观”的东西,只有脑子里有了一个软件的设计、运行思路,才能把一个一个类写出来,组合在一起。

    phith0n
  • 源码分析Dubbo服务提供者、服务消费者并发度控制机制

    本文将详细分析<dubbo:service executes=""/>与<dubbo:reference actives = ""/>的实现机制,深入探讨Dub...

    丁威
  • AVGater漏洞突破防病毒软件 影响大批知名杀毒软件 PoC已经公开

    用户1697231
  • 详解如何使用Android Studio开发Gradle插件

    首先说明一下为什么会有这篇文章。前段时间,插件化以及热修复的技术很热,Nuwa热修复的工具NuwaGradle,携程动态加载技术DynamicAPK,还有希望做...

    砸漏
  • OpenPose 基于OpenCV DNN 的多人姿态估计

    原文: OpenPose 基于OpenCV DNN 的多人姿态估计 - AIUAI

    AIHGF
  • 安恒信息APT产品监控到持续性有组织的 “基于破壳漏洞的跨平台攻击”

    日前,安恒信息在某政府机构网络中部署的APT产品监控到了多次“CVE-2014-6271 bash远程命令执行漏洞”告警,攻击源来自意大利、台北、奥地利、挪威、...

    安恒信息
  • 性能监控万能命令之top

    top命令是Linux下常用的性能分析工具,能够实时监控系统的运行状态,主要显示系统中各个进程的资源使用情况,并根据cpu及内存等进行排序,类似于windows...

    吾非同

扫码关注云+社区

领取腾讯云代金券