1:所有组件的中的this指的组件本身;所以window上绑定的所有属性跟方法必须用window方法调用;window不能省略(包括app.js , index.js)
2:所有的import必须放在最上面;否则会报错;报错如下:
//所有的import必须写在最上面
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import './css/basic.css';
import './css/index.css';
import './css/login.css';
import App from './App';
import {$fetch} from './common/common'
console.log('===')
import registerServiceWorker from './registerServiceWorker';
//ajax封装
window.$fetch=$fetch
ReactDOM.render(<App/>, document.getElementById('root'));
registerServiceWorker();
3:fetch封装(注意formData, equest payload中时不同的处理方法)
//ajax的POST请求封装
function $fetch(arg) {
var option = {
url: arg.url || '',
data: arg.data || {},
//请求成功的回调
callback: arg.callback || function () {
},
//请求错误时的处理
errorback: arg.errorback || function () {
},
}
let url=window.config.ajaxBaseUrl+option.url
return fetch(url, {
method: 'POST',
dataType: 'json',
//数据在form data
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: qs.stringify(option.data)
//数据在request payload
// headers: {
//
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify(option.data)
}).then(function (response) {
// console.log('response')
// console.log(response)
if ( !( response.status === 200)) {
alert(response.statusText)
}
return response.json();
}).then((res) => {
// console.log('res')
// console.log(res)
option.callback(res)
}).catch((err) => {
alert(err)
});
}
4:需要共享的数据才需要放到redux中;不需要共享的无需放到redux里面
5:组件上不能写 style=dispaly;否组不起作用