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

React 入门系列教程导航

我们的项目大多数情况下，是需要和服务端进行交互的。因此，我们需要一个接口请求文件，这里，我们的接口调用，按照老习惯，还是请求 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,'STATUS_ERROR') // err:,esta
        } else {
          console.log(response.body.return_msg)
        }
      }
    }
  })
}
function testRequestParams(method,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,failure)
  } else {
    try {
      throw new Error('接受的是一个对象或者为空(即null),但是却得到一个' + dataType(params))
    } catch (e) {
      console.error(e)
    }
  }
}
export default {
  get: function (url,failure) {
    testRequestParams('GET',root + '/' + url,failure)
  },post: function (url,failure) {
    testRequestParams('POST',put: function (url,failure) {
    testRequestParams('PUT',delete: function (url,failure) {
    testRequestParams('DELETE',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 原创，允许转载，但转载必须保留首发链接。

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

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

React 入门系列教程导航

配置代理

配置 tool/api.js 文件

测试一下是否正常

相关推荐