react外掛篇
- 在react中進行資料請求：
- fetch：
- 檢驗瀏覽器是否支援：
if(self.fetch) {
// run my fetch request here
} else {
// do something with XMLHttpRequest?
}
- 發起請求：
fetch('flowers.jpg')
.then(function(response) {
return response.blob(); //這裡是將接受的資料轉換為圖片
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
- 自定義請求的引數：
var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
fetch('flowers.jpg',myInit) //第二個引數是請求的引數
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
- 檢測請求是否成功:
由於fetch對於404等錯誤的返回也會當成成功，也就是說如果網不出現問題，只要有返回就會成功，基於此種情況，所以我們要對放回頭重status的狀態碼進行判斷，才能知道何時為請求資料成功；
fetch('flowers.jpg').then(function(response) {
if(response.status==”200”) { //對於返回的res中的status進行判斷
response.blob().then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
} else {
console.log('Network response was not ok.');
}
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
});
- 資料響應：
使用一個buffer陣列來讀取 Response流中的資料，並將bodyUsed狀態改為已使用。
使用一個Blob物件來讀取 Response流中的資料，並將bodyUsed狀態改為已使用。
使用一個 FormData 物件來讀取 Response流中的資料，並將bodyUsed狀態改為已使用。
使用一個 JSON 物件來讀取 Response流中的資料，並將bodyUsed狀態改為已使用。
使用一個USVString (文字) 物件來讀取 Response流中的資料，並將bodyUsed狀態改為已使用。
- 使用axios外掛：（可以模擬資料）
- 全域性下載axios外掛：
cnpm install –save-dev axios
- 在每一個使用資料請求的檔案中引入axios外掛進行資料的請求：
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
- 螞蟻金服ui框架（antd）
- 移動端使用：
- 首先下載兩個包：
$ npm install antd-mobile --save
$ npm install babel-plugin-import --save-dev
$ npm install Less-loader --save-dev
$ npm install less --save-dev
(此babel外掛是用來配合es6的module語法做antd元件懶載入的)
- 配置.babelrc檔案：
注：主要配置plugin外掛：
特別注意：import外掛的style屬性一定要設定為true，否則全域性樣式可能不生效
{
"presets": [
"es2015",
"stage-0",
"react"
],
plugins: [["transform-runtime",
{
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}], "syntax-dynamic-import", "transform-object-rest-spread", "transform-react-jsx", ["import", {
libraryName: "antd-mobile",
style: true,
}]]
}
- 配置webpack.config.js:
const svgSpriteDirs = [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 內建svg
//path.resolve(__dirname, 'src/my-project-svg-foler'), // 業務程式碼本地私有 svg 存放目錄
];
對於svg檔案的loader載入配置：
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: svgSpriteDirs,
}
// 使用css的module方式進行css的區域性作用域劃分
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader?module"
}),
exclude: /node_modules/
},
// 對於antd的modules中的css不可以使用css的module方式載入
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
}),
include: /node_modules/
},
// 為antd單獨新增less載入器
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
},
- 在全域性中中引入公共樣式:(如：main.js中)
import 'antd-mobile/dist/antd-mobile.css';
- 在元件中使用antd的元件：
import { Button } from 'antd-mobile';
return (
<div>
<Button className="btn" type="primary">primary button</Button>
</div>
);
- 元件的懶載入兩種方式：
import { Button } from 'antd-mobile';
（此種方式必須結合babel的外掛import）
import 'antd-mobile/lib/button/style';
import Button from 'antd-mobile/lib/button'
(此種方式不需要藉助任何外掛，但是使用此種方式，必須同時引入相應元件的樣式)
注：報錯處理
1、注意less載入器的新增，一定注意安裝less-loader時，一同把less安裝了，如下錯誤因為沒有安裝lesscnpm install –save-dev less
2、如果報webpack等一系列錯誤，則需要更改如下配置
- pc端的使用：
- 基本配置如上一樣：
- 注意babelrc檔案：
將：libraryName變成antd
{
"presets": [
"es2015",
"stage-0",
"react"
],
"plugins": [
"transform-runtime",
"transform-react-jsx",
["import", { libraryName: "antd", style: true }]]
}
- 其他的元件懶載入等問題，如移動端使用一樣；