Express框架Fetch通信总结

fetch配置

window.fetchUtility = function (options, errorFun) {
    var request = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        // headers: {
        //     'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        //     'Accept': 'application/json'
        // },
        cache: 'no-store',
        body:`userName=${options.data.userName}&password=${options.data.password}`
    };
    if (request.method.toLowerCase() === "get") {
        request.body = null;
    }
    return fetch(options.url, request)
        .then(function (response) {
            if (response.ok) {
                if (request.download) {
                    return response;
                }
                else {
                    return response.text().then(function (dataString) {
                        return {
                            responseStatus: response.status,
                            responseString: dataString,
                            isParseJson: request.isParseJson,
                            isPassStatus: request.isPassStatus
                        };
                    });
                }
            } else {
                if (response.status == 403) {
                    window.location.href = "/error/" + response.status;
                } else if (response.status == 409) {
                    // for simulation
                    $$.alert(true, { type: "w", content: "Sorry, currently you are in simulation mode and limited to read only access." });
                    throw new Error("simulation");
                }
                else {
                    if (errorFun) {
                        errorFun(response);
                    }
                    else {
                        throw new Error(response.statusText);
                    }
                }
            }
        }).then(function (fetchResult) {

            if (request.download) { return fetchResult };

            var queryResult = null;

            try {
                if (!fetchResult.responseString) {
                    return null;
                }
                if (fetchResult.isParseJson && fetchResult.responseString) {
                    if ($.isEmptyObject(fetchResult.responseString)) {
                        queryResult = "";
                    } else {
                        queryResult = JSON.parse(fetchResult.responseString);
                        if (fetchResult.isPassStatus) {
                            queryResult[FetchResponsePropName.status] = fetchResult.responseStatus;
                        }
                    }
                } else {
                    queryResult = fetchResult.responseString;
                }
            }
            catch (ex) {
                $$.error("An error happened while fetching information. Error:", ex);
            }
            return queryResult;
        });
};

get通信不涉及body问题贴个代码：

 retrieve(){
        let option = {
            url: `./api/about/getAbout?test=${'dqhan'}`,
            method:'Get'
        }
        fetchUtility(option).then(res=>{
            var a = res;
        }).catch(e=>{
            console.log(e);
        })
    }

express接受参数形式：
Express框架Fetch通信总结
因为调试过程中express中接受参数时一直接收不到，所以mark下(node小白，正在努力ヾ(◍°∇°◍)ﾉﾞ)
问题原因：
对node的不熟悉，以及对fetch的不精通。前后台通信数据传递最基本的就是

header定义发送、接受的媒体类型
请求方式post、get等等
body参数结构
以上三点是最基本的参数，然而我一直在纠结是不是还有什么配置错误，于是一直在这里打转转。
问题根本原因是需要在node里面使用body-parser来接受参数，这样express才能解析通信发过来的参数。
引用方式

var bodyParser  = require('body-parser');
const app = new express();
app.use(bodyParser.urlencoded({extended: true}))

接收：
Express框架Fetch通信总结
总结：我应该好好看看node的文档。sorry。
2018年最后一天，祝大家2019年心想事成，万事如意~

Express框架Fetch通信总结

相关推荐