React 项目记录（六）——配置 API 接口文件

最新推荐文章于 2026-06-16 08:35:49 发布

原创最新推荐文章于 2026-06-16 08:35:49 发布 · 2.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#node #react #js

React 记录专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在React项目中配置API接口文件，包括在tool/api.js中设置接口请求，安装superagent库，并进行成功测试。

Step 1：配置 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
}

Step 2：安装 superagent

npm i --save superagent

Step 3：测试是否成功

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>
    )
  }
}