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

本文信息

• 本文创建于2018/03/07
• 2018/03/20 新增 &＃8212; 拦截器

前述

前后端交互是开发现代应用必不可少的内容，不同于angular内置HttpClientModule，react默认并未提供用于http请求的功能。我们直接使用fetch，但一些老旧的浏览器支持度不太好。本文中，我们推荐使用基于Promise的库 &＃8212; 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相关的技术，以求进步。