React教程(五) : Axios 基础应用

安装：
npm install axios --save

新建TUAPI.js

import axios from 'axios';

export const TUAPI = axios.create({
    baseURL: process.env.REACT_APP_BASE_URL,
    responseType: 'json'
});


// Add a request interceptor
TUAPI.interceptors.request.use(function (config) {
    // Do something before request is sent
    debugger;
    let baseURL = process.env.REACT_APP_BASE_URL;
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

// Add a response interceptor
TUAPI.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    debugger;
    return response;
}, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
});

通常我们会在API对象上面再包装一层Service对象，比如：

//CHANGE_PASSWORD是TUAPI对象中export出来的一个常量，指向对应的REST API地址
import { CHANGE_PASSWORD, TUApi } from './TUApi';

class LoginService {
  ......................

  changePassword(oldPassword: string, newPassword: string): Promise<void> {
    return TUApi.post(CHANGE_PASSWORD, { oldPassword, newPassword });
  }

  ......................
}

export const loginService = new LoginService();