前端MVC Vue2學習總結（六）——axios與跨域HTTP請求、Lodash工具庫
1、axios
Vue更新到2.0以後宣告再也不對vue-resource更新，推薦使用axios，axios是一個用於客戶端與服務器通訊的組件，axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端javaScript工具。通俗來講能夠實現客戶端請求服務器端提供的服務得到數據。javascript
源碼與幫助：https://github.com/axios/axioscss
服務器端跨域支持請查看：http://www.cnblogs.com/best/p/6196202.html#_label2html
1.一、特色
- 從瀏覽器中建立 XMLHttpRequest
- 從 node.js 發出 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求和響應數據
- 取消請求
- 自動轉換JSON數據
- 客戶端支持防止 CSRF/XSRF
1.二、瀏覽器兼容性
1.三、依賴辦法
$ npm install axios $ cnpm install axios //taobao $ bower install axios 或者使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
瀏覽器能夠引入js文件前端
1.四、快速入門
1.4.0、服務器端
控制器：vue
package com.zhangguo.springmvc08.controller; import com.zhangguo.springmvc08.entity.User; import com.zhangguo.springmvc08.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.List; @RestController @RequestMapping(path = "/emps") public class EmpController extends BaseController { @Autowired UserService userService; @RequestMapping(path = "") public AjaxState getAllEmps(HttpServletRequest request, HttpServletResponse response) { List<User> users=userService.queryAllUsers(); boolean result=users!=null; return new AjaxState(result?"success":"error",users,result?"得到數據成功！":"得到數據失敗!"); } @RequestMapping(path = "/{id}", method = RequestMethod.GET) public AjaxState getEmpById(@PathVariable int id) { User user=userService.getUserById(id); boolean result=user!=null; return new AjaxState(result?"success":"error",user,result?"得到數據成功！":"得到數據失敗!"); } @RequestMapping(path = "/getEmpById", method = RequestMethod.GET) public AjaxState getEmpById(HttpServletRequest request) { int id=Integer.parseInt(request.getParameter("id")); User user=userService.getUserById(id); boolean result=user!=null; return new AjaxState(result?"success":"error",user,result?"得到數據成功！":"得到數據失敗!"); } @RequestMapping(path = "", method = RequestMethod.POST) public AjaxState addEmp(@RequestBody User user) { boolean result=userService.addUser(user); return new AjaxState(result?"success":"error",user,result?"添加成功！":"添加失敗"); } @RequestMapping(path = "", method = RequestMethod.PUT) public AjaxState updateEmp(@RequestBody User user) { boolean result=userService.editUser(user); return new AjaxState(result?"success":"error",user,result?"修改爲功！":"修改失敗"); } @RequestMapping(path = "/{id}", method = RequestMethod.DELETE) public AjaxState deleteEmpById(@PathVariable int id) { Boolean result=userService.deleteUser(id); return new AjaxState(result?"success":"error",id,result?"刪除成功！":"刪除失敗"); } } class AjaxState{ public String state; public Object data; public String message; public AjaxState(String state, Object data, String message) { this.state = state; this.data = data; this.message = message; } public AjaxState(){} }
跨域設置（任選一種）：java
方法1：Servlet，MVC均可以，Web.xmlnode
<filter> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> <init-param> <param-name>cors.allowOrigin</param-name> <param-value>http://127.0.0.1:8020</param-value> </init-param> <init-param> <param-name>cors.supportedMethods</param-name> <param-value>POST,GET,OPTIONS,DELETE,PUT</param-value> </init-param> <init-param> <param-name>cors.supportedHeaders</param-name> <param-value>Content-Type,Accept,Origin,XRequestedWith,ContentType,LastModified</param-value> </init-param> <init-param> <param-name>cors.exposedHeaders</param-name> <param-value>SetCookie</param-value> </init-param> <init-param> <param-name>cors.supportsCredentials</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CORS</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
方法2：Spring MVC，修改Spring 配置文件，低Spring版本不支持jquery
<mvc:cors> <mvc:mapping path="/**" allowed-origins="http://127.0.0.1:8020" allowed-methods="POST,GET, OPTIONS,DELETE,PUT" allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With" allow-credentials="true"/> </mvc:cors>
1.4.一、發送Get請求
//向具備指定ID的用戶發出請求 axios.get('/user?ID=123') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); //也能夠經過 params 對象傳遞參數 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
示例：webpack
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>axios</title> </head> <body> <div id="vm"> <button type="button" @click="get">Get請求</button> <button type="button" @click="getParam">Get請求帶參數</button> <h3>{{msg}}</h3> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: "#vm", data: { msg: "" }, methods: { get: function() { var that = this; axios.get("http://localhost:8080/mvc08/emps").then(function(response) { console.log(response); //this.msg=JSON.stringify(response.data); //錯誤this指向window vm.msg = JSON.stringify(response.data); that.msg = JSON.stringify(response.data); }).catch(function(error) { console.log(error); }) }, getParam: function() { axios.get("http://localhost:8080/mvc08/emps/getEmpById", { params: { id: 1 } }).then(function(response) { vm.msg = JSON.stringify(response.data); }).catch(function(error) { console.log(error); }) } } }); </script> </body> </html>
結果：ios
get請求
帶參數：
默認的content-type爲：application/json;charset=UTF-8
1.4.二、發送Post請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
示例(添加一個用戶)：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>axios</title> </head> <body> <div id="vm"> <button type="button" @click="get">Get請求</button> <button type="button" @click="getParam">Get請求帶參數</button> <button type="button" @click="post">Post請求帶參數</button> <h3>{{msg}}</h3> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: "#vm", data: { msg: "" }, methods: { get: function() { //get請求 var that = this; axios.get("http://localhost:8080/mvc08/emps").then(function(response) { console.log(response); //this.msg=JSON.stringify(response.data); //錯誤this指向window vm.msg = JSON.stringify(response.data); that.msg = JSON.stringify(response.data); }).catch(function(error) { console.log(error); }) }, getParam: function() { //帶參數的get axios.get("http://localhost:8080/mvc08/emps/getEmpById", { params: { id: 1 } }).then(function(response) { vm.msg = JSON.stringify(response.data); console.log(response); }).catch(function(error) { console.log(error); }) }, post: function() { //post var user = { "id": 1, "name": "張一三", "birthday": "1998-09-08", "address": "中國北京", "phone": "18989891122" }; axios .post("http://localhost:8080/mvc08/emps", user) .then(function(response) { vm.msg=response.data.data; console.log(response); }) .catch(function(error){ console.log(error); }); } } }); </script> </body> </html>
結果：
1.4.三、發送多個併發請求
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { //兩個請求現已完成 }));
示例（同時得到編號爲1與編號爲2的學生，經過兩個請求完成）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>axios</title> </head> <body> <div id="vm"> <button type="button" @click="all">all請求（併發請求）</button> <h3>{{msg}}</h3> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: "#vm", data: { msg: "" }, methods: { all:function(){ //得到用戶對象1 var getUser1=function(){ return axios.get("http://localhost:8080/mvc08/emps/1"); }; //得到用戶對象2 var getUser2=function(){ return axios.get("http://localhost:8080/mvc08/emps/2"); }; //併發請求處理結果 axios.all([getUser1(),getUser2()]) .then(axios.spread(function(response1,response2){ var result=""; result+=JSON.stringify(response1.data.data); result+=JSON.stringify(response2.data.data); vm.msg=result; })) .catch(function(error){ console.log(error); }); } } }); </script> </body> </html>
結果：
1.4.四、發送Put請求
示例（修改編號爲1的用戶信息）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>axios</title> </head> <body> <div id="vm"> <button type="button" @click="all">all請求（併發請求）</button> <button type="button" @click="put">put請求（修改數據）</button> <h3>{{msg}}</h3> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: "#vm", data: { msg: "" }, methods: { all: function() { //得到用戶對象1 var getUser1 = function() { return axios({ url:"http://localhost:8080/mvc08/emps/1", method:"get" }); }; //得到用戶對象2 var getUser2 = function() { return axios.get("http://localhost:8080/mvc08/emps/2"); }; //併發請求處理結果 axios.all([getUser1(), getUser2()]) .then(axios.spread(function(response1, response2) { var result = ""; result += JSON.stringify(response1.data.data); result += JSON.stringify(response2.data.data); vm.msg = result; })) .catch(function(error) { console.log(error); }); }, put: function() { var user = { "id": 1, "name": "張學霸", "birthday": "1988-09-08", "address": "中國珠海", "phone": "13223456786" }; axios.put("http://localhost:8080/mvc08/emps",user) .then(r=>vm.msg=r.data.data) .catch(e=>console.log(e)); } } }); </script> </body> </html>
結果：
1.4.五、發送Delete請求
示例（刪除編號爲2的用戶）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>axios</title> </head> <body> <div id="vm"> <button type="button" @click="all">all請求（併發請求）</button> <button type="button" @click="remove">delete請求（刪除數據）</button> <h3>{{msg}}</h3> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: "#vm", data: { msg: "" }, methods: { all: function() { //得到用戶對象1 var getUser1 = function() { return axios({ url:"http://localhost:8080/mvc08/emps/1", method:"get" }); }; //得到用戶對象2 var getUser2 = function() { return axios.get("http://localhost:8080/mvc08/emps/2"); }; //併發請求處理結果 axios.all([getUser1(), getUser2()]) .then(axios.spread(function(response1, response2) { var result = ""; result += JSON.stringify(response1.data.data); result += JSON.stringify(response2.data.data); vm.msg = result; })) .catch(function(error) { console.log(error); }); }, remove: function() { axios.delete("http://localhost:8080/mvc08/emps/2") .then(r=>vm.msg=r.data.data) .catch(e=>console.log(e)); } } }); </script> </body> </html>
結果：
1.三、幫助說明（API）
能夠經過將相關配置傳遞給 axios 來進行請求。
1.3.一、axios(config)
//發送一個 POST 請求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });
1.3.二、axios(url[, config])
// 發送一個 GET 請求 (GET請求是默認請求模式) axios('/user/12345');
1.3.三、請求方法別名
爲了方便起見，已經爲全部支持的請求方法提供了別名。
axios.request（config） axios.get（url [，config]） axios.delete（url [，config]） axios.head（url [，config]） axios.post（url [，data [，config]]） axios.put（url [，data [，config]]） axios.patch（url [，data [，config]]）
注意當使用別名方法時，不須要在config中指定url，method和data屬性。
1.3.四、併發
幫助函數處理併發請求。
axios.all（iterable）
axios.spread（callback）
1.3.五、建立實例
您可使用自定義配置建立axios的新實例。
axios.create（[config]）
var instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} });
示例（自定義實例$$，替代axios，統一url）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>axios</title> </head> <body> <div id="vm"> <button type="button" @click="all">all請求（併發請求）</button> <button type="button" @click="remove">delete請求（刪除數據）</button> <h3>{{msg}}</h3> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/axios/axios.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //建立自定義的axios實例 var $$=axios.create({ baseURL:"http://localhost:8080/mvc08/emps/" }); console.log($$); var vm = new Vue({ el: "#vm", data: { msg: "" }, methods: { all: function() { //得到用戶對象1 var getUser1 = function() { return $$({ url:"1", method:"get" }); }; //得到用戶對象2 var getUser2 = function() { return $$.get("24"); }; //併發請求處理結果 axios.all([getUser1(), getUser2()]) .then(axios.spread(function(response1, response2) { var result = ""; result += JSON.stringify(response1.data.data); result += JSON.stringify(response2.data.data); vm.msg = result; })) .catch(function(error) { console.log(error); }); }, remove: function() { $$.delete("2") .then(r=>vm.msg=r.data.data) .catch(e=>console.log(e)); } } }); </script> </body> </html>
結果：
1.3.六、實例方法
可用的實例方法以下所示。 指定的配置將與實例配置合併。
axios＃request（config） axios＃get（url [，config]） axios＃delete（url [，config]） axios＃head（url [，config]） axios＃post（url [，data [，config]]） axios＃put（url [，data [，config]]） axios＃patch（url [，data [，config]]）
1.3.七、請求配置
這些是用於發出請求的可用配置選項。 只有url是必需的。 若是未指定方法，請求將默認爲GET。
{ // `url`是將用於請求的服務器URL url: '/user', // `method`是發出請求時使用的請求方法 method: 'get', // 默認 // `baseURL`將被添加到`url`前面，除非`url`是絕對的。 // 能夠方便地爲 axios 的實例設置`baseURL`，以便將相對 URL 傳遞給該實例的方法。 baseURL: 'https://some-domain.com/api/', // `transformRequest`容許在請求數據發送到服務器以前對其進行更改 // 這隻適用於請求方法'PUT'，'POST'和'PATCH' // 數組中的最後一個函數必須返回一個字符串，一個 ArrayBuffer或一個 Stream transformRequest: [function (data) { // 作任何你想要的數據轉換 return data; }], // `transformResponse`容許在 then / catch以前對響應數據進行更改 transformResponse: [function (data) { // Do whatever you want to transform the data return data; }], // `headers`是要發送的自定義 headers headers: {'X-Requested-With': 'XMLHttpRequest'}, // `params`是要與請求一塊兒發送的URL參數 // 必須是純對象或URLSearchParams對象 params: { ID: 12345 }, // `paramsSerializer`是一個可選的函數，負責序列化`params` // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, // `data`是要做爲請求主體發送的數據 // 僅適用於請求方法「PUT」，「POST」和「PATCH」 // 當沒有設置`transformRequest`時，必須是如下類型之一： // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams // - Browser only: FormData, File, Blob // - Node only: Stream data: { firstName: 'Fred' }, // `timeout`指定請求超時以前的毫秒數。 // 若是請求的時間超過'timeout'，請求將被停止。 timeout: 1000, // `withCredentials`指示是否跨站點訪問控制請求 // should be made using credentials withCredentials: false, // default // `adapter'容許自定義處理請求，這使得測試更容易。 // 返回一個promise並提供一個有效的響應（參見[response docs]（＃response-api）） adapter: function (config) { /* ... */ }, // `auth'表示應該使用 HTTP 基本認證，並提供憑據。 // 這將設置一個`Authorization'頭，覆蓋任何現有的`Authorization'自定義頭，使用`headers`設置。 auth: { username: 'janedoe', password: 's00pers3cret' }, // 「responseType」表示服務器將響應的數據類型 // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' responseType: 'json', // default //`xsrfCookieName`是要用做 xsrf 令牌的值的cookie的名稱 xsrfCookieName: 'XSRF-TOKEN', // default // `xsrfHeaderName`是攜帶xsrf令牌值的http頭的名稱 xsrfHeaderName: 'X-XSRF-TOKEN', // default // `onUploadProgress`容許處理上傳的進度事件 onUploadProgress: function (progressEvent) { // 使用本地 progress 事件作任何你想要作的 }, // `onDownloadProgress`容許處理下載的進度事件 onDownloadProgress: function (progressEvent) { // Do whatever you want with the native progress event }, // `maxContentLength`定義容許的http響應內容的最大大小 maxContentLength: 2000, // `validateStatus`定義是否解析或拒絕給定的promise // HTTP響應狀態碼。若是`validateStatus`返回`true`（或被設置爲`null` promise將被解析;不然，promise將被 // 拒絕。 validateStatus: function (status) { return status >= 200 && status < 300; // default }, // `maxRedirects`定義在node.js中要遵循的重定向的最大數量。 // 若是設置爲0，則不會遵循重定向。 maxRedirects: 5, // 默認 // `httpAgent`和`httpsAgent`用於定義在node.js中分別執行http和https請求時使用的自定義代理。 // 容許配置相似`keepAlive`的選項， // 默認狀況下不啓用。 httpAgent: new http.Agent({ keepAlive: true }), httpsAgent: new https.Agent({ keepAlive: true }), // 'proxy'定義代理服務器的主機名和端口 // `auth`表示HTTP Basic auth應該用於鏈接到代理，並提供credentials。 // 這將設置一個`Proxy-Authorization` header，覆蓋任何使用`headers`設置的現有的`Proxy-Authorization` 自定義 headers。 proxy: { host: '127.0.0.1', port: 9000, auth: : { username: 'mikeymike', password: 'rapunz3l' } }, // 「cancelToken」指定可用於取消請求的取消令牌 // (see Cancellation section below for details) cancelToken: new CancelToken(function (cancel) { }) }
使用 then 時，您將收到以下響應：
axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
1.四、配置默認值
您能夠指定將應用於每一個請求的配置默認值。
1.4.一、全局axios默認值
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
1.4.二、自定義實例默認值
//在建立實例時設置配置默認值 var instance = axios.create（{ baseURL：'https://api.example.com' }）; //在實例建立後改變默認值 instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;
1.4.三、配置優先級順序
配置將與優先順序合併。 順序是lib / defaults.js中的庫默認值，而後是實例的defaults屬性，最後是請求的config參數。 後者將優先於前者。 這裏有一個例子。
//使用庫提供的配置默認值建立實例 //此時，超時配置值爲`0`，這是庫的默認值 var instance = axios.create（）; //覆蓋庫的超時默認值 //如今全部請求將在超時前等待2.5秒 instance.defaults.timeout = 2500; //覆蓋此請求的超時，由於它知道須要很長時間 instance.get（'/ longRequest'，{ timeout：5000 }）;
1.五、攔截器
你能夠截取請求或響應在被 then 或者 catch 處理以前
//添加請求攔截器 axios.interceptors.request.use（function（config）{ //在發送請求以前作某事 return config; }，function（error）{ //請求錯誤時作些事 return Promise.reject（error）; }）; //添加響應攔截器 axios.interceptors.response.use（function（response）{ //對響應數據作些事 return response; }，function（error）{ //請求錯誤時作些事 return Promise.reject（error）; }）;
若是你之後可能須要刪除攔截器。
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);
你能夠將攔截器添加到axios的自定義實例。
var instance = axios.create(); instance.interceptors.request.use(function () {/*...*/});
1.六、處理錯誤
axios.get（'/ user / 12345'） .catch（function（error）{ if（error.response）{ //請求已發出，但服務器使用狀態代碼進行響應 //落在2xx的範圍以外 console.log（error.response.data）; console.log（error.response.status）; console.log（error.response.headers）; } else { //在設置觸發錯誤的請求時發生了錯誤 console.log（'Error'，error.message）; }} console.log（error.config）; }）;
您可使用validateStatus配置選項定義自定義HTTP狀態碼錯誤範圍。
axios.get（'/ user / 12345'，{ validateStatus：function（status）{ return status < 500; //僅當狀態代碼大於或等於500時拒絕 }} }）
1.七、取消令牌（Cancellation）
您可使用取消令牌取消請求。
axios cancel token API基於可取消的promise提議，目前處於階段1。
您可使用CancelToken.source工廠建立一個取消令牌，以下所示：
var CancelToken = axios.CancelToken; var source = CancelToken.source（）; axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 處理錯誤 } }); //取消請求（消息參數是可選的） source.cancel（'操做被用戶取消。'）;
您還能夠經過將執行器函數傳遞給CancelToken構造函數來建立取消令牌：
var CancelToken = axios.CancelToken; var cancel; axios.get（'/ user / 12345'，{ cancelToken：new CancelToken（function executor（c）{ //一個執行器函數接收一個取消函數做爲參數 cancel = c; }） }）; // 取消請求 clear();
注意：您可使用相同的取消令牌取消幾個請求。
1.八、使用application / x-www-form-urlencoded格式
默認狀況下，axios將JavaScript對象序列化爲JSON。 要以應用程序/ x-www-form-urlencoded格式發送數據，您可使用如下選項之一。
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
1.8.一、瀏覽器中
在瀏覽器中，您可使用URLSearchParams API，以下所示：
var params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/foo', params);
請注意，全部瀏覽器都不支持URLSearchParams，可是有一個polyfill可用（確保polyfill全局環境）。
或者，您可使用qs庫對數據進行編碼：
var qs = require('qs'); axios.post('/foo', qs.stringify({ 'bar': 123 });
1.8.二、Node.js中
在node.js中，可使用querystring模塊，以下所示：
var querystring = require('querystring'); axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });
你也可使用qs庫。
2.九、Promise
axios 依賴本機要支持ES6 Promise實現。 若是您的環境不支持ES6 Promises，您可使用polyfill。
1.十、TypeScript
axios包括TypeScript定義。
import axios from 'axios';
axios.get('/user?ID=12345');
axios在很大程度上受到Angular提供的$http服務的啓發。 最終，axios努力提供一個在Angular外使用的獨立的$http-like服務。
2、Lodash
Lodash是一個具備一致接口、模塊化、高性能等特性的 JavaScript 工具庫。它內部封裝了諸多對字符串、數組、對象等常見數據類型的處理函數，其中部分是目前 ECMAScript 還沒有制定的規範，但同時被業界所承認的輔助函數。目前天天使用 npm 安裝 Lodash 的數量在百萬級以上，這在必定程度上證實了其代碼的健壯性，值得咱們在項目中一試。
中文文檔：http://www.css88.com/doc/lodash/
GitHub：https://github.com/lodash/
2.一、下載
CDN引用地址：https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js
2.二、安裝
瀏覽器:
<script src="lodash.js"></script> //或CDN <script scr="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
用npm:
$ npm i -g npm
$ npm i --save lodash
Nodejs:
// Load the full build. var _ = require('lodash'); // Load the core build. var _ = require('lodash/core'); // Load the FP build for immutable auto-curried iteratee-first data-last methods. var fp = require('lodash/fp'); // Load method categories. var array = require('lodash/array'); var object = require('lodash/fp/object'); // Cherry-pick methods for smaller browserify/rollup/webpack bundles. var at = require('lodash/at'); var curryN = require('lodash/fp/curryN');
2.三、模塊組成
Lodash 提供的輔助函數主要分爲如下幾類，函數列表和用法實例請查看 Lodash 的官方文檔：
Array，適用於數組類型，好比填充數據、查找元素、數組分片等操做
Collection，適用於數組和對象類型，部分適用於字符串，好比分組、查找、過濾等操做
Function，適用於函數類型，好比節流、延遲、緩存、設置鉤子等操做
Lang，廣泛適用於各類類型，經常使用於執行類型判斷和類型轉換
Math，適用於數值類型，經常使用於執行數學運算
Number，適用於生成隨機數，比較數值與數值區間的關係
Object，適用於對象類型，經常使用於對象的建立、擴展、類型轉換、檢索、集合等操做
Seq，經常使用於建立鏈式調用，提升執行性能（惰性計算）
String，適用於字符串類型
lodash/fp 模塊提供了更接近函數式編程的開發方式，其內部的函數通過包裝，具備immutable、auto-curried、iteratee-first、data-last（官方介紹）等特色
2.四、Lodash快速入門實例
2.4.1. N 次循環
// 1. Basic for loop. for(var i = 0; i < 5; i++) { // ... } // 2. Using Array's join and split methods Array.apply(null, Array(5)).forEach(function(){ // ... }); // Lodash _.times(5, function(){ // ... });
for 語句是執行循環的不二選擇，Array.apply 也能夠模擬循環，但在上面代碼的使用場景下，_.times() 的解決方式更加簡潔和易於理解。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lodash</title> </head> <body> <div id="vm"> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: "#vm", data: { msg: "" }, methods: { } }); var log = function(str) { console.log(str); } log(_.times(5)); log(_.times(5, String)); log(_.times(5, _.constant(0))); log(_.times(5, _.constant(true))); var a5=_.times(5, function(v) { return v+10; }) log(a5); </script> </body> </html>
結果：
2.4.2. 深層查找屬性值
// Fetch the name of the first pet from each owner var ownerArr = [{ "owner": "Colin", "pets": [{"name":"dog1"}, {"name": "dog2"}] }, { "owner": "John", "pets": [{"name":"dog3"}, {"name": "dog4"}] }]; // Array's map method. ownerArr.map(function(owner){ return owner.pets[0].name; }); // Lodash _.map(ownerArr, 'pets[0].name');
_.map 方法是對原生 map 方法的改進，其中使用 pets[0].name 字符串對嵌套數據取值的方式簡化了不少冗餘的代碼，很是相似使用 jQuery 選擇 DOM 節點 ul > li > a，對於前端開發者來講有種久違的親切感。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lodash</title> </head> <body> <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var log = function(str) { if(typeof str == "object") { console.log(JSON.stringify(str)); } console.log(str); } var arr = [{ "owner": "Colin", "pets": [{ "name": "dog1" }, { "name": "dog2" }] }, { "owner": "John", "pets": [{ "name": "dog3" }, { "name": "dog4" }] }]; log(_.map(arr,"pets")); log(_.map(arr,"owner")); log(_.map(arr,"pets[1].name")); log(_.map(arr,o=>o.pets[1].name+":)")); </script> </body> </html>
結果：
2.4.3. 個性化數組
// Array's map method. Array.apply(null, Array(6)).map(function(item, index){ return "ball_" + index; }); // Lodash _.times(6, _.uniqueId.bind(null, 'ball_')); // Lodash _.times(6, _.partial(_.uniqueId, 'ball_')); // eg. [ball_0, ball_1, ball_2, ball_3, ball_4, ball_5]
在上面的代碼中，咱們要建立一個初始值不一樣、長度爲 6 的數組，其中 _.uniqueId 方法用於生成獨一無二的標識符（遞增的數字，在程序運行期間保持獨一無二），_partial 方法是對 bind 的封裝。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lodash</title> </head> <body> <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var log = function(str) { if(typeof str == "object") { console.log(JSON.stringify(str)); } console.log(str); } //產生惟一編號 log(_.uniqueId()); log(_.uniqueId("gdnf_")); //封裝函數 function greet(greeting,name){ return greeting +" " +name; } log(greet("hello","tom")); var sayhello=_.partial(greet,'hello'); var sayhi=_.partial(greet,'hi'); log(sayhello('mark')); log(sayhi('rose')); //綜合 var array=_.times(5,_.partial(_.uniqueId,'ball_')); log(array); </script> </body> </html>
結果：
2.4.4. 深拷貝
var objA = { "name": "colin" } // Normal method? Too long. See Stackoverflow for solution: // http://stackoverflow.com/questions/4459928/how-to-deep-clone-in-javascript // Lodash var objB = _.cloneDeep(objA); objB === objA // false
JavaScript 沒有直接提供深拷貝的函數，但咱們能夠用其餘函數來模擬，好比 JSON.parse(JSON.stringify(objectToClone))，但這種方法要求對象中的屬性值不能是函數。Lodash 中的 _.cloneDeep 函數封裝了深拷貝的邏輯，用起來更加簡潔。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lodash</title> </head> <body> <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var log = function(str) { if(typeof str == "object") { console.log(JSON.stringify(str)); } console.log(str); } var obj0={address:"中國珠海"}; var obj1 = { id: 1, name: "rose", position:obj0 }; log("引用"); //引用 var obj2=obj1; log(obj2==obj1); log("淺拷貝"); //淺拷貝 var obj3=_.clone(obj1); log(obj3==obj1); log(obj3===obj1); log(obj3.position===obj1.position); log("深拷貝"); //深拷貝 var obj4=_.cloneDeep(obj1); log(obj4==obj1); log(obj4===obj1); log(obj4.position===obj1.position); </script> </body> </html>
結果：
2.4.5. 隨機數
// Naive utility method function getRandomNumber(min, max){ return Math.floor(Math.random() * (max - min + 1)) + min; } getRandomNumber(15, 20); // Lodash _.random(15, 20);
Lodash 的隨機數生成函數更貼近實際開發，ECMAScript 的隨機數生成函數是底層必備的接口，二者都不可或缺。此外，使用 _.random(15, 20, true) 還能夠在 15 到 20 之間生成隨機的浮點數。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lodash</title> </head> <body> <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var log = function(str) { if(typeof str == "object") { console.log(JSON.stringify(str)); } console.log(str); } var obj0={address:"中國珠海"}; var obj1 = { id: 1, name: "rose", position:obj0 }; var arr=_.times(10,function(){ return _.random(1,100); }); log(arr); </script> </body> </html>
結果：
2.4.6. 對象擴展
// Adding extend function to Object.prototype Object.prototype.extend = function(obj) { for (var i in obj) { if (obj.hasOwnProperty(i)) { this[i] = obj[i]; } } }; var objA = {"name": "colin", "car": "suzuki"}; var objB = {"name": "james", "age": 17}; objA.extend(objB); objA; // {"name": "james", "age": 17, "car": "suzuki"}; // Lodash _.assign(objA, objB);
_.assign 是淺拷貝，和 ES6 新增的 Ojbect.assign 函數功能一致（建議優先使用 Object.assign）。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lodash</title> </head> <body> <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var log = function(str) { if(typeof str == "object") { console.log(JSON.stringify(str)); } console.log(str); } var obj0 = { address: "中國珠海" }; var obj1 = { id: 1, name: "rose", position: obj0 }; var x = { a: 1, b: 2, c: 3 }; var y = { b: 5, c: 6, d: 7 }; //用y擴展x _.assign(x,y); log(x); //x被修改了 log(y); </script> </body> </html>
結果：
2.4.7. 篩選屬性
// Naive method: Remove an array of keys from object Object.prototype.remove = function(arr) { var that = this; arr.forEach(function(key){ delete(that[key]); }); }; var objA = {"name": "colin", "car": "suzuki", "age": 17}; objA.remove(['car', 'age']); objA; // {"name": "colin"} // Lodash objA = _.omit(objA, ['car', 'age']); // => {"name": "colin"} objA = _.omit(objA, 'car'); // => {"name": "colin", "age": 17}; objA = _.omit(objA, _.isNumber); // => {"name": "colin"};
大多數狀況下，Lodash 所提供的輔助函數都會比原生的函數更貼近開發需求。在上面的代碼中，開發者可使用數組、字符串以及函數的方式篩選對象的屬性，而且最終會返回一個新的對象，中間執行篩選時不會對舊對象產生影響。
// Naive method: Returning a new object with selected properties Object.prototype.pick = function(arr) { var _this = this; var obj = {}; arr.forEach(function(key){ obj[key] = _this[key]; }); return obj; }; var objA = {"name": "colin", "car": "suzuki", "age": 17}; var objB = objA.pick(['car', 'age']); // {"car": "suzuki", "age": 17} // Lodash var objB = _.pick(objA, ['car', 'age']); // {"car": "suzuki", "age": 17}
_.pick 是 _.omit 的相反操做，用於從其餘對象中挑選屬性生成新的對象。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lodash</title> </head> <body> <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var log = function(str) { if(typeof str == "object") { console.log(JSON.stringify(str)); } console.log(str); } var obj0 = { address: "中國珠海" }; var obj1 = { id: 1, name: "rose", position: obj0 }; var student = { name: "張三", age: 18, address: "中國香港" }; //刪除屬性地址，未修改原數組 var obj1 = _.omit(student, "address"); log(obj1); var obj2 = _.omit(student, ['age','name']); log(obj2); </script> </body> </html>
結果：
2.4.8. 隨機元素
var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"]; function pickRandomPerson(luckyDraw){ var index = Math.floor(Math.random() * (luckyDraw.length -1)); return luckyDraw[index]; } pickRandomPerson(luckyDraw); // John // Lodash _.sample(luckyDraw); // Colin // Lodash - Getting 2 random item _.sample(luckyDraw, 2); // ['John','Lily']
_.sample 支持隨機挑選多個元素並返回新的數組。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Lodash</title> </head> <body> <script src="../js/lodash/lodash.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var log = function(str) { if(typeof str == "object") { console.log(JSON.stringify(str)); } console.log(str); } var luckyDraw = ["Colin", "John", "James", "Lily", "Mary"]; //隨機得到一個 log(_.sample(luckyDraw)); //隨機得到多個 log(_.sampleSize(luckyDraw,2)); </script> </body> </html>
結果：
2.4.9. 針對 JSON.parse 的錯誤處理
// Using try-catch to handle the JSON.parse error function parse(str){ try { return JSON.parse(str); } catch(e) { return false; } } // With Lodash function parseLodash(str){ return _.attempt(JSON.parse.bind(null, str)); } parse('a'); // => false parseLodash('a'); // => Return an error object parse('{"name": "colin"}'); // => Return {"name": "colin"} parseLodash('{"name": "colin"}'); // => Return {"name": "colin"}
若是你在使用 JSON.parse 時沒有預置錯誤處理，那麼它頗有可能會成爲一個定時炸彈，咱們不該該默認接收的 JSON 對象都是有效的。try-catch 是最多見的錯誤處理方式，若是項目中 Lodash，那麼可使用 _.attmpt 替代 try-catch 的方式，當解析 JSON 出錯時，該方法會返回一個 Error 對象。
隨着 ES6 的普及，Lodash 的功能或多或少會被原生功能所替代，因此使用時還須要進一步甄別，建議優先使用原生函數。
2.五、更多功能
1) _.map(collection, [iteratee=_.identity], [thisArg])
做用：建立一個通過 iteratee 處理的集合中每個元素的結果數組. iteratee 會傳入3個參數：(value, index|key, collection).
別名（Aliases）：_.collect
參數1): 須要遍歷的集合，能夠是數組，對象或者字符串.
參數2): 迭代器，能夠是函數，對象或者字符串.
參數3): 迭代器中this所綁定的對象.
返回值(Array): 映射後的新數組.
示例:
1 function timesThree(n) { 2 return n * 3; 3 } 4 5 _.map([1, 2], timesThree); 6 // => [3, 6] 7 8 _.map({ 'a': 1, 'b': 2 }, timesThree); 9 // => [3, 6] (iteration order is not guaranteed) 10 11 var users = [ 12 { 'user': 'barney' }, 13 { 'user': 'fred' } 14 ]; 15 16 // using the `_.property` callback shorthand 17 _.map(users, 'user'); 18 // => ['barney', 'fred']
2) _.chunk(array, [size=1])
做用：將 array 拆分紅多個 size 長度的塊，把這些塊組成一個新數組。 若是 array 沒法被分割成所有等長的塊，那麼最後剩餘的元素將組成一個塊.
參數1): 須要被處理的數組.
參數2): 每一個塊的長度.
返回值(Array): 返回一個包含拆分塊數組的新數組（至關於一個二維數組）.
示例:
1 _.chunk(['a', 'b', 'c', 'd'], 2); 2 // => [['a', 'b'], ['c', 'd']] 3 4 _.chunk(['a', 'b', 'c', 'd'], 3); 5 // => [['a', 'b', 'c'], ['d']]
3) _.compact(array)
做用：建立一個新數組幷包含原數組中全部的非假值元素。例如 false、null、 0、""、undefined 和 NaN 都是「假值」.
參數: 須要被過濾的數組.
返回值(Array): 過濾假值後的數組.
示例:
1 _.compact([0, 1, false, 2, '', 3]); 2 // => [1, 2, 3]
4) _.difference(array, [values])
做用：建立一個差別化後的數組，不包括使用 SameValueZero 方法提供的數組.
參數1): 須要處理的數組.
參數2): 數組須要排除掉的值.
返回值(Array): 過濾後的數組.
示例:
1 _.difference([1, 2, 3], [4, 2]); 2 // => [1, 3] 3 _.difference([1, '2', 3], [4, 2]); 4 // => [1, "2", 3]
5) _.drop(array, [n=1])
做用：將 array 中的前 n 個元素去掉，而後返回剩餘的部分.
參數1): 被操做的數組.
參數2): 去掉的元素個數.
返回值(Array): 數組的剩餘部分.
示例:
1 _.drop([1, 2, 3]); 2 // => [2, 3] 默認是1開始的 3 4 _.drop([1, 2, 3], 2); 5 // => [3] 6 7 _.drop([1, 2, 3], 5); 8 // => [] 9 10 _.drop([1, 2, 3], 0); 11 // => [1, 2, 3]
6)_.dropRight(array, [n=1])
做用：將 array 尾部的 n 個元素去除，並返回剩餘的部分.
參數1): 須要被處理的數組.
參數2): 去掉的元素個數.
返回值(Array): 數組的剩餘部分.
示例:
1 _.dropRight([1, 2, 3]); 2 // => [1, 2] 3 4 _.dropRight([1, 2, 3], 2); 5 // => [1] 6 7 _.dropRight([1, 2, 3], 5); 8 // => [] 9 10 _.dropRight([1, 2, 3], 0); 11 // => [1, 2, 3]
7)_.dropRightWhile(array, [predicate=_.identity], [thisArg])
做用：從尾端查詢（右數）數組 array ，第一個不知足predicate 條件的元素開始截取數組.
參數1): 須要查詢的數組.
參數2): 迭代器，能夠是函數，對象或者字符串.
參數3): 對應 predicate 屬性的值.
返回值(Array): 截取元素後的數組.
示例:
1 _.dropRightWhile([1, 2, 3], function(n) { 2 return n > 1; 3 }); 4 // => [1] 5 6 var users = [ 7 { 'user': 'barney', 'active': true }, 8 { 'user': 'fred', 'active': false }, 9 { 'user': 'pebbles', 'active': false } 10 ]; 11 12 // using the `_.matches` callback shorthand 13 _.pluck(_.dropRightWhile(users, { 'user': 'pebbles', 'active': false }), 'user'); 14 // => ['barney', 'fred'] 15 16 // using the `_.matchesProperty` callback shorthand 17 _.pluck(_.dropRightWhile(users, 'active', false), 'user'); 18 // => ['barney'] 19 20 // using the `_.property` callback shorthand 21 _.pluck(_.dropRightWhile(users, 'active'), 'user'); 22 // => ['barney', 'fred', 'pebbles']
8)_.pluck(collection, path)
做用：抽取集合中path所指定的路徑的屬性值.
參數1): 須要抽取的數組.
參數2): 須要抽取的屬性所對應的路徑.
返回值(Array): 抽取的屬性值所組成的數組.
示例:
1 var users = [ 2 { 'user': 'barney', 'age': 36 }, 3 { 'user': 'fred', 'age': 40 } 4 ]; 5 6 _.pluck(users, 'user'); 7 // => ['barney', 'fred'] 8 9 var userIndex = _.indexBy(users, 'user'); 10 _.pluck(userIndex, 'age'); 11 // => [36, 40] (iteration order is not guaranteed)
9)_.fill(array, value, [start=0], [end=array.length])
做用：使用 value 值來填充（也就是替換） array，從start位置開始, 到end位置結束（但不包含end位置）.
參數1): 須要填充的數組.
參數2): 填充 array 元素的值.
參數3): 起始位置（包含）.
參數4): 結束位置（不含）.
返回值(Array): 填充後的數組.
示例:
1 var array = [1, 2, 3]; 2 3 _.fill(array, 'a'); 4 console.log(array); 5 // => ['a', 'a', 'a'] 6 7 _.fill(Array(3), 2); 8 // => [2, 2, 2] 9 10 _.fill([4, 6, 8], '*', 1, 2); 11 // => [4, '*', 8]
10)_.findIndex(array, [predicate=_.identity], [thisArg])
做用：該方法相似 _.find，區別是該方法返回的是符合 predicate條件的第一個元素的索引，而不是返回元素自己.
參數1): 須要搜索的數組.
參數2): 迭代器，能夠是函數，對象或者字符串.
參數3): 對應 predicate 屬性的值.
返回值(Number): 符合查詢條件的元素的索引值, 未找到則返回 -1.
示例:
1 var users = [ 2 { 'user': 'barney', 'active': false }, 3 { 'user': 'fred', 'active': false }, 4 { 'user': 'pebbles', 'active': true } 5 ]; 6 7 _.findIndex(users, function(chr) { 8 return chr.user == 'barney'; 9 }); 10 // => 0 11 12 // using the `_.matches` callback shorthand 13 _.findIndex(users, { 'user': 'fred', 'active': false }); 14 // => 1 15 16 // using the `_.matchesProperty` callback shorthand 17 _.findIndex(users, 'active', false); 18 // => 0 19 20 // using the `_.property` callback shorthand 21 _.findIndex(users, 'active'); 22 // => 2
11)_.find(collection, [predicate=_.identity], [thisArg])
做用：遍歷集合中的元素，返回最早經 predicate 檢查爲真值的元素. predicate 會傳入3個元素：(value, index|key, collection).
參數1): 要檢索的集合，能夠是數組，對象或者字符串.
參數2): 迭代器，能夠是函數，對象或者字符串.
參數3): 迭代器中this所綁定的對象.
返回值: 匹配元素，不然返回 undefined.
示例:
1 var users = [ 2 { 'user': 'barney', 'age': 36, 'active': true }, 3 { 'user': 'fred', 'age': 40, 'active': false }, 4 { 'user': 'pebbles', 'age': 1, 'active': true } 5 ]; 6 7 _.find(users, function(o) { return o.age < 40; }); 8 // => 'barney' 9 10 // 使用了 `_.matches` 的回調結果 11 _.find(users, { 'age': 1, 'active': true }); 12 // => 'pebbles' 13 14 // 使用了 `_.matchesProperty` 的回調結果 15 _.find(users, ['active', false]); 16 // => 'fred' 17 18 // 使用了 `_.property` 的回調結果 19 _.find(users, 'active'); 20 // => 'barney'
12)_.forEach(collection, [iteratee=_.identity], [thisArg])
做用：調用 iteratee 遍歷集合中的元素， iteratee 會傳入3個參數：(value, index|key, collection)。 若是顯式的返回 false ，iteratee 會提早退出.
參數1): 須要遍歷的集合，能夠是數組，對象或者字符串.
參數2): 迭代器，只能是函數.
參數3): 迭代器中this所綁定的對象.
返回值: 遍歷後的集合.
示例:
1 _([1, 2]).forEach(function(value) { 2 console.log(value); 3 }); 4 // => 輸出 `1` 和 `2` 5 6 _.forEach({ 'a': 1, 'b': 2 }, function(value, key) { 7 console.log(key); 8 }); 9 // => 輸出 'a' 和 'b' (不保證遍歷的順序)
13)_.reduce(collection, [iteratee=_.identity], [accumulator], [thisArg])
做用：經過 iteratee 遍歷集合中的每一個元素. 每次返回的值會做爲下一次 iteratee 使用。若是沒有提供accumulator，則集合中的第一個元素做爲 accumulator. iteratee 會傳入4個參數：(accumulator, value, index|key, collection).
參數1): 須要遍歷的集合，能夠是數組，對象或者字符串.
參數2): 迭代器，只能是函數.
參數3): 累加器的初始化值.
參數4): 迭代器中this所綁定的對象.
返回值: 累加後的值.
示例:
1 _.reduce([1, 2], function(total, n) { 2 return total + n; 3 }); 4 // => 3 5 6 _.reduce({ 'a': 1, 'b': 2 }, function(result, n, key) { 7 result[key] = n * 3; 8 return result; 9 }, {}); 10 // => { 'a': 3, 'b': 6 } (iteration order is not guaranteed)
14)_.some(collection, [predicate=_.identity], [thisArg])
做用：經過 predicate 檢查集合中的元素是否存在任意真值的元素，只要 predicate 返回一次真值，遍歷就中止，並返回 true. predicate 會傳入3個參數：(value, index|key, collection).
參數1): 須要遍歷的集合，能夠是數組，對象或者字符串.
參數2): 迭代器，能夠是函數，對象或字符串.
參數3): 迭代器中this所綁定的對象.
返回值: 若是任意元素經 predicate 檢查都爲真值，則返回true，不然返回 false.
示例:
1 _.some([null, 0, 'yes', false], Boolean); 2 // => true 3 4 var users = [ 5 { 'user': 'barney', 'active': true }, 6 { 'user': 'fred', 'active': false } 7 ]; 8 9 // using the `_.matches` callback shorthand 10 _.some(users, { 'user': 'barney', 'active': false }); 11 // => false 12 13 // using the `_.matchesProperty` callback shorthand 14 _.some(users, 'active', false); 15 // => true 16 17 // using the `_.property` callback shorthand 18 _.some(users, 'active'); 19 // => true
15)_.chain(value)
做用：建立一個包含 value 的 lodash 對象以開啓內置的方法鏈.方法鏈對返回數組、集合或函數的方法產生做用，而且方法能夠被鏈式調用.
參數: 須要被包裹成lodash對象的值.
返回值: 新的lodash對象的實例.
示例:
1 var users = [ 2 { 'user': 'barney', 'age': 36 }, 3 { 'user': 'fred', 'age': 40 }, 4 { 'user': 'pebbles', 'age': 1 } 5 ]; 6 7 var youngest = _.chain(users) 8 .sortBy('age') 9 .map(function(chr) { 10 return chr.user + ' is ' + chr.age; 11 }) 12 .first() 13 .value(); 14 // => 'pebbles is 1'
3、做業
3.一、使用axios+vue2實現<<迷你任務管理>>，MicTodo，要求與步驟以下：
- 定義後臺服務，請注意跨域，也能夠簡化成同域服務（模擬後臺數據）
- 實現對任務的添加，修改，刪除，查詢功能
- 任務中只須要要這些屬性（編號id,名稱name,狀態state）,固然加上時間更好
- 使用Lodash完成搜索功能，能夠指定要顯示的列
3.二、在Loadsh中找到5個關於集合操做的方法，測試經過，不能與上課示例相同
4、示例下載
https://git.coding.net/zhangguo5/vue2.git
5、視頻
相關文章
- 1. 學習總結：前端跨域請求的解決辦法——JSONP
- 2. axios 前端請求接口 跨域問題 Vue實現跨域請求
- 3. axios 跨域請求詳解
- 4. 【前端學習】Vue2.x搭配Axios執行ajax請求
- 5. Vue-axios跨域請求
- 6. Http--跨域請求
- 7. 跨域和http請求學習
- 8. 跨域請求小總結
- 9. django - 總結 - 跨域請求
- 10. 前端跨域請求--vue
- 更多相關文章...
- • HTTP 請求方法 - HTTP 教程
- • jQuery Mobile 工具欄 - jQuery Mobile 教程
- • PHP開發工具
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 學習總結：前端跨域請求的解決辦法——JSONP
- 2. axios 前端請求接口 跨域問題 Vue實現跨域請求
- 3. axios 跨域請求詳解
- 4. 【前端學習】Vue2.x搭配Axios執行ajax請求
- 5. Vue-axios跨域請求
- 6. Http--跨域請求
- 7. 跨域和http請求學習
- 8. 跨域請求小總結
- 9. django - 總結 - 跨域請求
- 10. 前端跨域請求--vue