umi + axios 请求数据（二）

本文讲解内容：在umi 项目中引入dva及采用axios请求接口的方案。

• Umi: 是一个可插拔的企业级 react 应用框架
• axios: 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF
• dva: 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

1、组件层：

    componentDidMount() {
        // 引用命名空间及方法查询列表
        this.props.dispatch({ type: 'Reminder/qryList' })
    }

2、model层

import { rtsGetCategorysList } from '@/services';
import { fetchData} from '@/services/api';

export default {
  namespace:"Reminder",// 命名空间名字，必填  
  state:{     // state就是用来放初始值的
    payCode:"00"
  },
  /** 
   * // 能改变界面的action应该放这里,
   * 这里按官方意思不应该做数据处理，只是用来return state 从而改变界面
  */
 // 与后台交互，处理数据逻辑的地方
  effects:{
    *qryList({ payload }, { call, put }){
      const response = yield call(fetchData, payload);
      console.log("speding",response)
    },
  },
  reducers:{
    
  }
}

3、service层

import { axios } from '@/utils/request';
import { stringify } from 'qs';

/* 查询 用户提醒列表
* @param {*} params 
*/
export async function qryList(params) {
  return axios(`/ucc/modules/zcy/uad/uad_user_identity/query${stringfy(params)}`);
};

4、axios配置

import axios from 'axios'

// 基本配置
axios.defaults.baseURL = "http://localhost:8001/ucc/"   //api前缀
 
const axios= axios.create({
    xsrfCookieName: 'xsrf-token' ,  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
    timeout: 1000,    // 如果请求话费了超过 `timeout` 的时间，请求将被中断
    proxy: {    // 'proxy' 定义代理服务器的主机名称和端口
    host: '10.10.10.198',
    port: 9000,
  },
});
 
instance.interceptors.request.use(function (config) {
  return config;
}, function (error) {
  return Promise.reject(error);
});
 
instance.interceptors.response.use(function (response) {
  return response     // 下节详述
}, function (error) {
  return Promise.reject(error);
});
export default axios;