前端MVC Vue2學習總結（六）——axios與跨域HTTP請求、Lodash工具庫

一、axios

Vue更新到2.0之后宣告不再對vue-resource更新，推薦使用axios，axios是一個用於客戶端與服務器通信的組件，axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端javaScript工具。通俗來說可以實現客戶端請求服務器端提供的服務獲得數據。

源碼與幫助：https://github.com/axios/axios

服務器端跨域支持請查看：http://www.cnblogs.com/best/p/6196202.html#_label2

1.1、特點

• 從瀏覽器中創建 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止 CSRF/XSRF

1.2、瀏覽器兼容性

1.3、依賴辦法

$ npm install axios
$ cnpm install axios //taobao
$ bower install axios
或者使用cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 瀏覽器可以引入js文件

1.4、快速入門

1.4.0、服務器端

控制器：

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(){}
}

跨域設置（任選一種）：

方法1：Servlet，MVC都可以，Web.xml

    <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版本不支持

    <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.1、發送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);
});

示例：

<!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>

結果：

get請求

帶參數：

默認的content-type為：application/json;charset=UTF-8

1.4.2、發送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.3、發送多個並發請求

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.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.5、發送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.3、幫助說明（API）

可以通過將相關配置傳遞給 axios 來進行請求。

1.3.1、axios(config)

//發送一個 POST 請求
axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
});

1.3.2、axios(url[, config])

// 發送一個 GET 請求 (GET請求是默認請求模式)
axios('/user/12345');

1.3.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.4、並發

幫助函數處理並發請求。

axios.all（iterable）
axios.spread（callback）

1.3.5、創建實例

您可以使用自定義配置創建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.6、實例方法

可用的實例方法如下所示。 指定的配置將與實例配置合並。

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.7、請求配置

這些是用於發出請求的可用配置選項。 只有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.4、配置默認值

您可以指定將應用於每個請求的配置默認值。

1.4.1、全局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.2、自定義實例默認值

//在創建實例時設置配置默認值
var instance = axios.create（{
　　baseURL：'https://api.example.com'
}）;

//在實例創建后改變默認值
instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;

1.4.3、配置優先級順序

配置將與優先順序合並。 順序是lib / defaults.js中的庫默認值，然后是實例的defaults屬性，最后是請求的config參數。 后者將優先於前者。 這里有一個例子。

//使用庫提供的配置默認值創建實例
//此時，超時配置值為`0`，這是庫的默認值
var instance = axios.create（）;

//覆蓋庫的超時默認值
//現在所有請求將在超時前等待2.5秒
instance.defaults.timeout = 2500;

//覆蓋此請求的超時，因為它知道需要很長時間
instance.get（'/ longRequest'，{
timeout：5000
}）;

1.5、攔截器

你可以截取請求或響應在被 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.6、處理錯誤

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.7、取消令牌（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.8、使用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.1、瀏覽器中

在瀏覽器中，您可以使用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.2、Node.js中

在node.js中，可以使用querystring模塊，如下所示：

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

你也可以使用qs庫。

2.9、Promise

axios 依賴本機要支持ES6 Promise實現。 如果您的環境不支持ES6 Promises，您可以使用polyfill。

1.10、TypeScript

axios包括TypeScript定義。

import axios from 'axios';
axios.get('/user?ID=12345');

axios在很大程度上受到Angular提供的$http服務的啟發。 最終，axios努力提供一個在Angular外使用的獨立的$http-like服務。

二、Lodash

Lodash是一個具有一致接口、模塊化、高性能等特性的 JavaScript 工具庫。它內部封裝了諸多對字符串、數組、對象等常見數據類型的處理函數，其中部分是目前 ECMAScript 尚未制定的規范，但同時被業界所認可的輔助函數。目前每天使用 npm 安裝 Lodash 的數量在百萬級以上，這在一定程度上證明了其代碼的健壯性，值得我們在項目中一試。

官網：https://lodash.com/

中文文檔：http://www.css88.com/doc/lodash/

英文幫助：https://lodash.com/docs/

GitHub：https://github.com/lodash/

2.1、下載

• Core build (~4kB gzipped)
• Full build (~24kB gzipped)
• CDN copies

CDN引用地址：https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js

2.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.3、模塊組成

Lodash 提供的輔助函數主要分為以下幾類，函數列表和用法實例請查看 Lodash 的官方文檔：

Array，適用於數組類型，比如填充數據、查找元素、數組分片等操作

Collection，適用於數組和對象類型，部分適用於字符串，比如分組、查找、過濾等操作

Function，適用於函數類型，比如節流、延遲、緩存、設置鈎子等操作

Lang，普遍適用於各種類型，常用於執行類型判斷和類型轉換

Math，適用於數值類型，常用於執行數學運算

Number，適用於生成隨機數，比較數值與數值區間的關系

Object，適用於對象類型，常用於對象的創建、擴展、類型轉換、檢索、集合等操作

Seq，常用於創建鏈式調用，提高執行性能（惰性計算）

String，適用於字符串類型

lodash/fp 模塊提供了更接近函數式編程的開發方式，其內部的函數經過包裝，具有immutable、auto-curried、iteratee-first、data-last（官方介紹）等特點

2.4、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.5、更多功能

1) _.map(collection, [iteratee=_.identity], [thisArg])

 作用：創建一個經過 iteratee 處理的集合中每一個元素的結果數組. iteratee 會傳入3個參數：(value, index|key, collection). 

 別名（Aliases）：_.collect

 參數1): 需要遍歷的集合，可以是數組，對象或者字符串.

 參數2): 迭代器，可以是函數，對象或者字符串.

 參數3): 迭代器中this所綁定的對象.

 返回值(Array): 映射后的新數組.

 示例:

function timesThree(n) {
  return n * 3;
}

_.map([1, 2], timesThree);
// => [3, 6]

_.map({ 'a': 1, 'b': 2 }, timesThree);
// => [3, 6] (iteration order is not guaranteed)

var users = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];

// using the `_.property` callback shorthand
_.map(users, 'user');
// => ['barney', 'fred']

2) _.chunk(array, [size=1])

 作用：將 array 拆分成多個 size 長度的塊，把這些塊組成一個新數組。 如果 array 無法被分割成全部等長的塊，那么最后剩余的元素將組成一個塊.

 參數1): 需要被處理的數組.

 參數2): 每個塊的長度.

 返回值(Array): 返回一個包含拆分塊數組的新數組（相當於一個二維數組）.

 示例:

_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

3) _.compact(array)

 作用：創建一個新數組並包含原數組中所有的非假值元素。例如 false、null、 0、""、undefined 和 NaN 都是“假值”.

 參數: 需要被過濾的數組.

 返回值(Array): 過濾假值后的數組.

 示例:

_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

4) _.difference(array, [values])

 作用：創建一個差異化后的數組，不包括使用 SameValueZero 方法提供的數組.

 參數1): 需要處理的數組.

 參數2): 數組需要排除掉的值.

 返回值(Array): 過濾后的數組.

 示例:

_.difference([1, 2, 3], [4, 2]);
// => [1, 3]
_.difference([1, '2', 3], [4, 2]);
// => [1, "2", 3]

5) _.drop(array, [n=1])

 作用：將 array 中的前 n 個元素去掉，然后返回剩余的部分.

 參數1): 被操作的數組.

 參數2): 去掉的元素個數.

 返回值(Array): 數組的剩余部分.

 示例:

_.drop([1, 2, 3]);
// => [2, 3] 默認是1開始的

_.drop([1, 2, 3], 2);
// => [3]

_.drop([1, 2, 3], 5);
// => []

_.drop([1, 2, 3], 0);
// => [1, 2, 3]

6)_.dropRight(array, [n=1])

 作用：將 array 尾部的 n 個元素去除，並返回剩余的部分.

 參數1): 需要被處理的數組.

 參數2): 去掉的元素個數.

 返回值(Array): 數組的剩余部分.

 示例:

_.dropRight([1, 2, 3]);
// => [1, 2]

_.dropRight([1, 2, 3], 2);
// => [1]

_.dropRight([1, 2, 3], 5);
// => []

_.dropRight([1, 2, 3], 0);
// => [1, 2, 3]

7)_.dropRightWhile(array, [predicate=_.identity], [thisArg])

 作用：從尾端查詢（右數）數組 array ，第一個不滿足predicate 條件的元素開始截取數組.

 參數1): 需要查詢的數組.

 參數2): 迭代器，可以是函數，對象或者字符串.

 參數3): 對應 predicate 屬性的值.

 返回值(Array): 截取元素后的數組.

 示例:

_.dropRightWhile([1, 2, 3], function(n) {
  return n > 1;
});
// => [1]

var users = [
  { 'user': 'barney',  'active': true },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': false }
];

// using the `_.matches` callback shorthand
_.pluck(_.dropRightWhile(users, { 'user': 'pebbles', 'active': false }), 'user');
// => ['barney', 'fred']

// using the `_.matchesProperty` callback shorthand
_.pluck(_.dropRightWhile(users, 'active', false), 'user');
// => ['barney']

// using the `_.property` callback shorthand
_.pluck(_.dropRightWhile(users, 'active'), 'user');
// => ['barney', 'fred', 'pebbles']

 8)_.pluck(collection, path)

 作用：抽取集合中path所指定的路徑的屬性值.

 參數1): 需要抽取的數組.

 參數2): 需要抽取的屬性所對應的路徑.

 返回值(Array): 抽取的屬性值所組成的數組.

 示例:

var users = [
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 }
];

_.pluck(users, 'user');
// => ['barney', 'fred']

var userIndex = _.indexBy(users, 'user');
_.pluck(userIndex, 'age');
// => [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): 填充后的數組.

 示例:

var array = [1, 2, 3];

_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']

_.fill(Array(3), 2);
// => [2, 2, 2]

_.fill([4, 6, 8], '*', 1, 2);
// => [4, '*', 8]

10)_.findIndex(array, [predicate=_.identity], [thisArg])

 作用：該方法類似 _.find，區別是該方法返回的是符合 predicate條件的第一個元素的索引，而不是返回元素本身. 

 參數1): 需要搜索的數組.

 參數2): 迭代器，可以是函數，對象或者字符串.

 參數3): 對應 predicate 屬性的值.

 返回值(Number): 符合查詢條件的元素的索引值, 未找到則返回 -1.

 示例:

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];

_.findIndex(users, function(chr) {
  return chr.user == 'barney';
});
// => 0

// using the `_.matches` callback shorthand
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1

// using the `_.matchesProperty` callback shorthand
_.findIndex(users, 'active', false);
// => 0

// using the `_.property` callback shorthand
_.findIndex(users, 'active');
// => 2

11)_.find(collection, [predicate=_.identity], [thisArg])

 作用：遍歷集合中的元素，返回最先經 predicate 檢查為真值的元素. predicate 會傳入3個元素：(value, index|key, collection).

 參數1): 要檢索的集合，可以是數組，對象或者字符串.

 參數2): 迭代器，可以是函數，對象或者字符串.

 參數3): 迭代器中this所綁定的對象.

 返回值: 匹配元素，否則返回 undefined.

 示例:

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

_.find(users, function(o) { return o.age < 40; });
// =>  'barney'

// 使用了 `_.matches` 的回調結果
_.find(users, { 'age': 1, 'active': true });
// =>  'pebbles'

// 使用了 `_.matchesProperty` 的回調結果
_.find(users, ['active', false]);
// =>  'fred'

// 使用了 `_.property` 的回調結果
_.find(users, 'active');
// =>  'barney'

 12)_.forEach(collection, [iteratee=_.identity], [thisArg])

 作用：調用 iteratee 遍歷集合中的元素， iteratee 會傳入3個參數：(value, index|key, collection)。 如果顯式的返回 false ，iteratee 會提前退出.

 參數1): 需要遍歷的集合，可以是數組，對象或者字符串.

 參數2): 迭代器，只能是函數.

 參數3): 迭代器中this所綁定的對象.

 返回值: 遍歷后的集合.

 示例:

_([1, 2]).forEach(function(value) {
  console.log(value);
});
// => 輸出 `1` 和 `2`

_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key);
});
// => 輸出 '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所綁定的對象.

 返回值: 累加后的值.

 示例:

_.reduce([1, 2], function(total, n) {
  return total + n;
});
// => 3

_.reduce({ 'a': 1, 'b': 2 }, function(result, n, key) {
  result[key] = n * 3;
  return result;
}, {});
// => { '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.

 示例:

_.some([null, 0, 'yes', false], Boolean);
// => true

var users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred',   'active': false }
];

// using the `_.matches` callback shorthand
_.some(users, { 'user': 'barney', 'active': false });
// => false

// using the `_.matchesProperty` callback shorthand
_.some(users, 'active', false);
// => true

// using the `_.property` callback shorthand
_.some(users, 'active');
// => true

15)_.chain(value)

 作用：創建一個包含 value 的 lodash 對象以開啟內置的方法鏈.方法鏈對返回數組、集合或函數的方法產生作用，並且方法可以被鏈式調用.

 參數: 需要被包裹成lodash對象的值.

 返回值: 新的lodash對象的實例.

 示例:

var users = [
  { 'user': 'barney',  'age': 36 },
  { 'user': 'fred',    'age': 40 },
  { 'user': 'pebbles', 'age': 1 }
];

var youngest = _.chain(users)
  .sortBy('age')
  .map(function(chr) {
    return chr.user + ' is ' + chr.age;
  })
  .first()
  .value();
// => 'pebbles is 1'

三、作業

3.1、使用axios+vue2實現<<迷你任務管理>>，MicTodo，要求與步驟如下：

• 定義后台服務，請注意跨域，也可以簡化成同域服務（模擬后台數據）
• 實現對任務的添加，修改，刪除，查詢功能
• 任務中只需要要這些屬性（編號id,名稱name,狀態state）,當然加上時間更好
• 使用Lodash完成搜索功能，可以指定要顯示的列

3.2、在Loadsh中找到5個關於集合操作的方法，測試通過，不能與上課示例相同

四、示例下載

https://git.coding.net/zhangguo5/vue2.git

五、視頻

https://www.bilibili.com/video/av17503637/