第五章 openblock-gui实现用户登录4(前端发送请求)

前言

上一章我们已经实现了登录弹窗了，那有了登录弹窗接下来肯定要获取登录信息开始登录了对吧，那本章我们就一起来实现获取弹窗的输入信息并完成请求发送。

代码编写

首先呢我们是不是需要先去收集到用户在弹出框内填入的账号和密码对吧，好的那么接下来呢我们便修改下我们之前写的login-popup，需要对input框加入ref属性(如果你还是熟悉ref是什么建议翻到我们的第二章去bilibili先学一学)，然后就是新增一个getAccountAndPasswod的方法，然后将按钮的点击事件替换成getAccountAndPasswod，修改如下

修改完保存来看看效果呗

这就获取的用户输入的信息了，是不是很简单，那么接下来我们就要来修改下我们的reducer了，在此之前我们来回顾下天禹老师给出的redux原理图

看着上图我们打开我们之前写好的reducer(user-status.jsx)，分析下我们之前所写的redux是不是缺少了ActionCreators并且reducer也并完整没有根据action去做相应的工作对吧，因此我们现在要完善我们之前写的user-status，修改如下

目前已经能获取到用户输入并且完善了reducer，接下来就是发送用户请求了，发送请求前在src下新建一个public文件夹，然后在public下新建utils.js，将以下内容拷贝进去

/**
 * 封装fetch请求
 */
 
// 全局路径
const commonUrl = 'http://www.XX.com:8001'
export const parseJSON = function (response) {
    return response.json();
};
export const checkStatus = function (response) {
    if (response.status >= 200 && response.status < 500){
        return response;
    }
    const error = new Error(response.statusText)
    error.response = response
    throw error;
};
// eslint-disable-next-line require-jsdoc
export default function request (options = {}) {
    const {data, url} = options
    options = {...options}
    // 跨域
    options.mode = 'cors'
    delete options.url
    if (data) {
        delete options.data
        options.body = JSON.stringify({
            data
        });
    }
    options.headers = {
        'Content-Type': 'application/json'
    }
    return fetch(commonUrl + url, options, {credentials: 'include'})
        .then(checkStatus)
        .then(parseJSON)
        .catch(err => ({err}));
}

然后在login-popup内导入刚才从user-state内暴露出来的方法以及public\utils.js内的方法

然后在LoginPopup组件内添加fetch请求方法

来测试下，正确请求，当然没有后端与数据库的小伙伴是请求不到的，不过也别害怕最后一章我将会讲后端与数据库，先写着

接下来就是展示我们请求回来的数据就行了，我们之前做了loginState的共享，现在也是一样的把userData做个共享，考虑到篇幅有点长了，userData共享内容我们下一章见。

上一章
第四章 openblock-gui实现用户登录3(登录弹窗制作)
下一章
第六章 openblock-gui实现用户登录5(userData共享)