react-08-01 ajax

1 下载依赖

cnpm install axios –save
//yarn add axios

2 封装ajax请求

1 api/ajax.js

/*
* 能发送异步Ajax请求的函数模块
* 封装axios库:github获取
* 函数的返回值是promise对象
* */

import axios from 'axios'
export default function ajax(url, data={},type='GET') {
    if(type === 'GET'){     //发送get请求
        return axios.get(url,{  //配置对象
            params: data  //指定请求参数
        });
    }else{      //发post请求
        return axios.post(url,data);
    }
}

//请求登录接口
//ajax('/login',{username:'Tom',password:'123456'},'POST').then();
//添加用户
//ajax('/manage/user/add',{username:'Tom',password:'123456',phone:'12345678'},'POST').then();

2 api/index.js

/*
要求：能根据接口文档定义接口请求
* 包含应用中所有接口请求函数的模块
* 统一暴露和分别暴露都可以
* 每个函数的返回值都是promise
* */
// export default{
//     xxx (){
//
//     },
//     yyy (){
//
//     }
// }
import ajax from './ajax'
//登录
// export function reqLogin(username,password) {
//     return ajax('./login',{username,password},'POST')
// }

//箭头函数方式
//登录
export const reqLogin = (username,password) => ajax('./login',{username,password},'POST')

//添加用户
export const reqAddUser = (user) =>ajax('./manage/user/add',user,'POST')

3 配置代理

1 Login.jsx请求登录

import {reqLogin} from "../../api/index"


//实现方法
//第四步：取输入框中对应的值
handleSubmit = (event) =>{
    //阻止事件的默认行为,点击提交按钮不会默认提交
    event.preventDefault();

    //对所有的表单字段进行验证。自动获取values
    this.props.form.validateFields( (err, values) =>{
        //校验成功
        if(!err){
            console.log('提交ajax请求',values);
            //请求登录
            const {username,password} = values;
            reqLogin(username,password).then(response =>{
                console.log('成功了',response.data);
            }).catch(error =>{
                console.log('失败了',error);
            })
        }else{
            console.log('提交失败');
        }
    })

    //
    // //如何手动得到form对象
    // const form = this.props.form;
    // //获取表单项的输入数据
    // const values = form.getFieldsValue();
    // console.log(values);

}

2 package.json