react + axios实践

本文只要介绍如何在项目中把react和axios结合起来使用，想了解更多关于axios详细知识以及api，可以到官网查看 https://www.npmjs.com/package/axios

首先安装 axios

$npm install axios  或  $yarn install axios

代码中引入axios

import axios from 'axios';

写一个拦截所有请求的axios全局拦截器

import axios from 'axios';
import globalCode from '../constants/globalCode';
import { Toast } from 'antd-mobile';
import {createHashHistory} from 'history';
import commonInfo from '../common/CommonInfo';
 
const instance = axios.create({
    //当创建实例的时候配置默认配置
    xsrfCookieName: 'xsrf-token'
});
 
//添加请求拦截器
instance.interceptors.request.use(function(config){
        //在发送请求之前做某事，比如加一个loading
        if(commonInfo.hasLoading){
            Toast.loading('', 3);
        }
 
        return config;
    },function(error){
        //请求错误时做些事
        Toast.hide();
        return Promise.reject(error);
});
 
//添加一个响应拦截器
instance.interceptors.response.use(function (response) {
    // 1.成功
    if (response.data.success && response.data.messageCode === globalCode.success) {
        if(commonInfo.hasLoading){
            Toast.hide();
        }
        return response.data.data;
    }
 
    // 2.session过期
    if (!response.data.success && response.data.messageCode === globalCode.timeout) {
        Toast.hide();
        Toast.info("会话过期，请重新登录", 1);
        createHashHistory().push('/login');
 
        // 定义一个messagecode在后面会用到
        return  Promise.reject({
            messageCode: 'timeout'
        })
    }
 
    // 3.11111111 系统异常、网络异常
    if (response.data.success && response.data.messageCode === globalCode.busyCode) {
        Toast.hide();
        Toast.info(response.data.message, 1);
        return  Promise.reject({
            messageCode: 'netError'
        })
    }
 
    // 3.其他失败，比如校验不通过等
    return Promise.reject(response.data);
}, function () {
    Toast.hide();
    // 4.系统错误，比如500、404等
    Toast.info('系统异常，请稍后重试！', 1);
    return Promise.reject({
        messageCode: 'sysError'
    });
});
 
export default instance;

引用 axios 的 instance 实例

mport API from '../../config/api';
import instance from '../utils/axiosCore';
 
// PS:此处如果对请求参数格式有疑问的可以查看官网资料，此处就不一一做详细解释了
// get
export const login = (params) => {
   return instance.get(API.LOGIN_API, { params: params });
};
 
// post
export const getConsultant = (params) => {
   return instance.post(API.GET_CONSULTANT_API, params);
};

发送请求并处理请求返回数据

import { login } from '../../models/loginModel'；
 
login = () => {
        let params = {
           username: "admin",
           password: "123456"
        };
 
        login (params).then((data) => {
            //此处为正常业务数据的处理
 
        }, (data) => {
            if (data.messageCode !== 'netError' && data.messageCode !== 'sysError' && data.messageCode !== 'timeout') {
                //此处是对除了以上几个系统异常意外的业务异常的处理
                Toast.info(data.message, commonInfo.showToastTime);
            }
        });
    };
 
// 一次性并发多个请求
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果
  }))

到此，就是一个完整的从请求发送->拦截请求->请求响应->拦截响应->处理返回数据。

上面的apis 文件可以用下面的方法写

封装一个匿名函数返回一个apis对象，通过apis对象的键名去获取对应的api地址

// 集中管理路由，所有的接口地址：
//  1.整个应用用到了哪些接口一目了然
//  2.接口地址可能变化，方便管理
​
const prefix = '' // api地址前缀
export default(config => {
    return Object.keys(config).reduce((copy, name) => {
      copy[name] = `${prefix}$config[name]`
      return copy
    })
})({
  // example api
  "getExampleData": "/api/example/data"
})
​

文件最终返回一个对象

// api对象
{
  getExampleData: '/api/example/data'
}