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