Scratch3.0开发记录（三）添加登录功能之使用fetch配置登录端口

使用fetch，fetch各位自行了解。

1.封装Fetch函数

首先在src目录下新建public文件夹。文件夹下新建utils.js文件，里面配置一些公共函数。

/**
 * 封装fetch请求
 */

// 全局路径
const commonUrl = \'http://www.XX.com:8001\'
const parseJSON = function (response) {
    return response.json();
};
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}));
}
这里可以自行百度fetch封装，我只是为了配合上篇文章才这么写的。

2.去调用Fetch函数
（1）在components/login/submit-login-button.jsx文件下添加 myFunction函数，想写es6可以自行修改，
（注1）这里为了实例所以没用全局变量，想标准一些可以去 webpack.config.js文件添加如下代码，怎么用自行查询理解一下，总之就是全局变量的问题
devServer: {
    contentBase: path.resolve(__dirname, \'build\'),
    host: \'0.0.0.0\',
    port: process.env.PORT || 8601,
    proxy: [{
        context: [\'/api/**\', \'**\'],
        target: \'你的API地址\',
        changeOrigin: true,
        secure: false
    }]
},


（注2）login/submit-login-button.jsx文件看上篇博文（如果更新了的话）
引入方法如下
import {parseJSON, checkStatus} from \'../../public/utils.js\';
这里用了三种fetch方法，我是随便用的，都是一个意思，第三种用的是自行封装的函数
const myFunction = function (){
    // eslint-disable-next-line no-console
    console.log(\'登录！\'); 
    // ------  方法一  -------
    // const url = \'/Login/（你的API接口url）\';
    // fetch(url,{
    //     method: \'post\',
    //     mode: \'cors\',
    //     headers: {
    //         \'Content-Type\': \'application/json\'
    //     },
    //     body: JSON.stringify({
    //         password: \'1234567\',
    //         username: \'y3\',
    //         tel:\'1322222233\'
    //     })
    // }).then(response=>response.json())
    //     .then(data=>console.log(data))
    //     .catch(e=>console.log(\'error\' + e))

    // ------ 方法二 -------
    const commonUrl = \'你的API接口地址\';
    const options = {};
    const url = commonUrl + \'/Login/（你的API接口url）\';
    const data = {
        \'password\': \'1234567\',
        \'username\': \'yang\',
        \'tel\': \'13848324733\'
    }
    options.method = \'post\'
    options.mode = \'cors\'
    options.body = JSON.stringify(data)
    options.headers = {
        \'Content-Type\': \'application/json\'
    }
    return fetch(url,options,{credentials:\'include\'})
        .then(checkStatus)
        .then(parseJSON)
        .then((res) => {
            // if (res.retCode === \'0001\'){
            //     localStorage.setItem(\'x-access-token\',res.retBody.AccessToken)
            //     return \'success\';
            // } else if (res.retCode === \'0002\'){
            //     return \'error\';
            // } else if (res.retCode === \'0003\'){
            //     return \'error\';
            // } else {
            //     return;
            // }

        })
        .catch(err=>({err}))
    // --------- 方法三 ---------
    // request({
    //     url: \'（你的API接口具体的url）\',
    //     method: \'post\',
    //     mode: \'cors\',
    //     data: {
    //         Header: {\'Access-Control-Allow-Origin\': \'*\', \'Content-Type\': \'application/json\'},
    //         Body: JSON.stringify({
    //             password: \'1234567\', username: \'y3\', tel: \'13843322123\'
    //         })
    //     }
    // }) .then (function(response) {
    //     return response.json()
    // }).then (function(json) {
    //     console.log(\'parsed json\', json)
    // }).catch(function(ex) {
    //     console.log(\'parsing failed\', ex)
    // })
}
使用的是post请求，配置跨域，body传递的数据全部转为json
options.method = \'post\'
options.mode = \'no-cors\'
options.body = JSON.stringify(data)
options.headers = {
    \'Access-Control-Allow-Origin\': \'*\',  
    \'Content-Type\': \'application/json\'
}
（2）修改下方onClick，添加刚写的myFunction方法
SubmitLoginButton.defaultProps = {
    onClick: () => {
        myFunction();
　　}
};
（3）去试试
点击登录，

 



 搞定！


可能遇到的问题：


跨域，下篇文章会介绍


已更新：https://www.cnblogs.com/mryaohu/p/12483757.html 









							

   
版权声明：本文为mryaohu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。



本文链接：https://www.cnblogs.com/mryaohu/p/12481941.html