前后端分离，前端请求后端接口的过程

最新推荐文章于 2024-08-01 14:29:43 发布

一下子就醒了

最新推荐文章于 2024-08-01 14:29:43 发布

阅读量3.5w

点赞数 7

分类专栏：前端杂谈 react 工具函数

本文链接：https://blog.csdn.net/weixin_42442713/article/details/89813160

版权

前端的代码是运行在nodejs环境下，前端代码大概分为service层，model层，和view层（page），service层封装请求接口的函数，model层调用service层定义的函数获取参数并存储起来，然后把存储的数据再page中展示出来。

下面一步步讲解：

由于涉及的前端知识比较多，很多细节并没有讲解得得很充分，只是大概讲一个过程，想学更多得前端知识请看：es6,react,dva,antd等一系列知识。

在service层中需要用到两个封装好的工具函数，在前端项目中可以添加到utils目录中

urlencodeed.js 作用：拼接请求参数

//@ts-check

/**
 * @param {
  {[x: string]: any}} fields
 */
export function urlencoded(fields) {
  if (!fields)
    return '';

  const result = [];
  Object.keys(fields).forEach(key => {
    const value = fields[key];
    if (typeof value === 'undefined' || (typeof value === 'object' && !value)) // undefined or null
      return;
    if (Array.isArray(value))
      return value.forEach(v => result.push(`${key}=${encodeURIComponent(v)}`));
    return result.push(`${key}=${encodeURIComponent(value)}`);
  });
  return result.join('&');
}

requestWithToken.js 作用：用于发起HTTP请求

//@ts-check
/// <reference path="../types.d.ts" />

import _ from 'lodash';
import fetch from 'dva/fetch';
import { notification } from 'antd';
import { saveTokenInfo, getTokenInfo, clearTokenInfo } from './tokenStorage';
import { isDevelopment, unused, devEcho, devWarning } from './debug';
import { urlencoded } from './urlencoded';
import { expandObjectToJSON } from './expandObjectToJSON';

const defaultOptions = { credentials: 'include' };

const X_CSRF = 'X-CSRF-TOKEN';

/**
 * @param  {string} methodUri for example: "GET /api/services/xxx"
 * @param  {
  {headers?: {[name: string]: string}; body?: any; asJSON?: boolean|"expand";}} [options]
 */
function createHttpFetch(methodUri, options = {}) {
  const [method, uri] = methodUri.split