react扬帆起航之前后端数据交互
本文信息
前述前后端交互是开发现代应用必不可少的内容,不同于angular内置
设置baseUrl如果 // client.ts import axios from 'axios'; axios.defaults.baseURL = 'http://api.example.com'; export default axios; 使用时直接调用 // 使用示例 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; 开发环境下
|