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

本文信息

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

前述

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

axios的基本用法非常简单，跟jquery的ajax类似。

设置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吧，有兴趣的朋友可以一起来完善。