react扬帆起航之前后端数据交互

前端之家收集整理的这篇文章主要介绍了react扬帆起航之前后端数据交互前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文信息

  • 本文创建于2018/03/07
  • 2018/03/20 新增 -- 拦截

前述

前后端交互是开发现代应用必不可少的内容,不同于angular内置HttpClientModule,react默认并未提供用于http请求的功能。我们直接使用fetch,但一些老旧的浏览器支持度不太好。本文中,我们推荐使用基于Promise的库 -- axios

axios的基本用法非常简单,跟jqueryajax类似。

设置baseUrl

如果restful api至于一个单独域名之下,且支持跨域。我们可以对axios进行自定义配置设置baseUrl并封装。

// client.ts

import axios from 'axios';

axios.defaults.baseURL = 'http://api.example.com';

export default axios;

使用时直接调用client.ts即可:

// 使用示例
import client from 'client.ts';
...
  client.get('/api/v0/test')
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
  });
...

拦截

// client.ts
import axios from 'axios';

// 请求头携带token
axios.interceptors.request.use(
  (config) => {
    const storageCredential = localStorage.getItem('credentials');
    const credentials = storageCredential ? JSON.parse(storageCredential) : null;
    if (credentials && credentials.access_token) {
      config.headers = { ...config.headers,Authorization: 'Bearer ' + credentials.access_token };
    }
    return config;
  },(error) => {
    return Promise.reject(error);
  }
);

// 处理response
axios.interceptors.response.use(
  (response) => {
    // success handle
    return response;
  },(error) => {
    if (error.response && error.response.status === 401) {
      // 401 handle
    }
    return Promise.reject(error);
  });

  export default axios;

开发环境下proxy设置

一般情况下,react在开发环境下会启动一个dev server,假设我们此时又启动了一个api server用于提供后端数据,那么就会涉及一个跨域的问题。为了解决跨域问题,我们就需要进行代理配置。具体实现方式为,在package.json添加(以api server端口号3000为例):

/* package.json */
"proxy": {
  "/api": {
    "target": "http://localhost:3000","secure": "false"
  }
}

至此,前后端数据交互的内容完毕。


react扬帆启航专栏分享的时我个人学习与实践react过程中的一些历程,希望借此专栏与大家共同探讨react相关的技术,以求进步。

第一期系列文章主要内容有: react的基本环境搭建、路由配置与组建分割、前后端数据交互、状态管理(mobx)、react应用部署以及同构。

第一期系列文章主要记录的是我搭建react的种子项目react-sail的过程。如果你觉得对你有些帮助的话,给react-sail个start吧,有兴趣的朋友可以一起来完善。

猜你在找的React相关文章