第六節：前后端交互之axios用法及async異步編程

一. axios用法

參考：

　　API文檔: https://www.kancloud.cn/yunye/axios/234845

　　GitHub: https://github.com/axios/axios

　　其它博客：https://www.jianshu.com/p/d771bbc61dab

用到的服務器端接口：

    [Route("api/[controller]/[action]")]
    [ApiController]
    public class FirstController : ControllerBase
    {

        /******************************************下面是測試Get請求的相關方法***************************************************/

        #region 下面是測試Get請求的相關方法
        [HttpGet]
        public string GetInfor1(string userName, string pwd)
        {
            return $"{userName}+{pwd}";
        }

        [HttpGet]
        public string GetInfor2([FromQuery]UserInfor model)
        {
            return $"{model.userName}+{model.pwd}";
        }
        [HttpGet]
        //加上[FromQuery]也報錯
        public string GetInfor3([FromQuery]dynamic model)
        {
            return $"{model.userName}+{model.pwd}";
        }

        #endregion

    }
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class ThirdController : Controller
    {
       [HttpGet]
        public IActionResult GetInfor4(string userName, string pwd)
        {
            return Json(new
            {
                userName,
                pwd
            });
        }
    }

1.簡介

　　Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。具有以下特點：從瀏覽器中創建 XMLHttpRequests，從 node.js 創建 http 請求，支持 Promise API，攔截請求和響應，轉換請求數據和響應數據，取消請求，自動轉換 JSON 數據，客戶端支持防御 XSRF。

　　它封裝了一些簡易API方便快速使用，如axios.get、axios.post,也支持原始用法 axios({}),這點和JQuery還挺像的。

2.基本用法

(1). 形如axios.get().then().catch();

　　在then中通過 ret.data獲取返回值，特別注意這里的返回值會自動轉換為json，因為responseType: 'json'（默認的）, 錯誤會進入catch，這里和fetch不一樣，像400、415、500等網絡錯誤都可以進入到catch，不需要再單獨處理。

代碼分享：

                            axios.get('https://localhost:44387/api/First/GetInfor3?userName=ypf&pwd=123456')
                            .then(function(response) {
                                console.log(response);
                            })
                            .catch(function(error) {
                                console.log(error);
                                console.log(error.response.status + '---' + error.response.statusText);
                            });

(2).Get請求

　　A.用axios.get寫法，可以直接在參數上拼接，也可以通過params屬性寫數據,當然也可附加一下額外的參數，如：headers、timeout等等。

　　B.用axios原始寫法, 利用params傳遞參數，實際上和直接拼接是完全一樣的,當然也可附加一下額外的參數，如：headers、timeout等等。

代碼分享：

                        //用法1
                        // axios.get('https://localhost:44387/api/First/GetInfor1?userName=123&pwd=hhh').then(function(ret) {
                        //     console.log(ret.data)
                        // });
                        //用法2
                        axios.get('https://localhost:44387/api/First/GetInfor1', {
                            params: {
                                userName: 'ypf',
                                pwd: '1234'
                            },
                            //下面是一些額外參數
                            headers: {
                                'token': 'xxsdfsdfxx'
                            },
                            timeout: 3000,

                        }).then(function(ret) {
                            console.log(ret.data)
                        })

                        //get的原始寫法
                        axios({
                            method: 'get',
                            url: 'https://localhost:44387/api/First/GetInfor1',
                            params: {
                                userName: 'lisi',
                                pwd: 123
                            },
                            headers: {
                                'token': 'xxsdfsdfxx'
                            },
                        }).then(function(ret) {
                            console.log(ret.data)
                        });

(3).Post請求

PS：其中Post請求有兩種，分別是： "application/x-www-form-urlencoded"表單提交的方式 和 "application/json" Json格式提交的方式。

(1). Post的表單提交的格式為："userName=admin&pwd=123456"。

(2). Post的Json的提交格式為：將實體(類)轉換成json字符串。

A.用axios.Post寫法（附帶傳遞額外參數）

　　a.表單提交:需要借助URLSearchParams參數進行傳遞。

　　b.JSON提交:直接拼接，即為json提交 {userName: 'lisi', pwd: 123}

代碼分享：

                        //表單提交
                        var params = new URLSearchParams();
                        params.append('userName', 'zhangsan');
                        params.append('pwd', '111');
                        axios.post('https://localhost:44387/api/First/Login3', params).then(function(ret) {
                            console.log(ret.data)
                        })
                         //JSON提交
                        //默認是json格式傳參的
                        axios.post('https://localhost:44387/api/First/Login2', {
                            userName: 'lisi',
                            pwd: 123
                        }).then(function(ret) {
                            console.log(ret.data)
                        })
                        //axios.post 傳遞額外參數  （json格式的提交）
                        axios.post('https://localhost:44387/api/First/Login2', {
                            userName: 'lisi',
                            pwd: 123
                        }, { 
                            //下面是一些額外參數
                            headers: {
                                'token': 'xxsdfsdfxx'
                            },
                            timeout: 3000,
                        }).then(function(ret) {
                            console.log(ret.data)
                        });

B.用axios原始寫法 （附帶傳遞額外參數）

　　a.表單提交: 借助URLSearchParams提交； 或者在data里寫，但是用transformRequest轉換一下也能達到效果。

　　b.JSON提交: 直接在data屬性里寫就是JSON提交。

代碼分享：

//1.原始寫法 post（JSON提交）
                        axios({
                            method: 'post',
                            url: 'https://localhost:44387/api/First/Login2',
                            data: {
                                userName: 'lisi',
                                pwd: 123
                            },
                            headers: {
                                'token': 'xxsdfsdfxx'
                            },
                        }).then(function(ret) {
                            console.log(ret.data)
                        });

                        //2. 原始寫法 post（表單提交）用法1
                        var params = new URLSearchParams();
                        params.append('userName', 'zhangsan');
                        params.append('pwd', '111');
                        axios({
                            method: 'post',
                            url: 'https://localhost:44387/api/First/Login3',
                            data:params,
                            headers: {
                                'token': 'xxsdfsdfxx'
                            },
                        }).then(function(ret) {
                            console.log(ret.data)
                        });

                        //3. 原始寫法 post（表單提交） 用法2
                        axios({
                            method: 'post',
                            url: 'https://localhost:44387/api/First/Login3',
                            //允許在向服務器發送前，修改請求數據
                            transformRequest: [function(data) {
                                let ret = ''
                                for (let it in data) {
                                    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                                }
                                return ret;
                            }],
                            data: {
                                userName: 'lisi',
                                pwd: 123
                            },
                            headers: {
                                'token': 'xxsdfsdfxx',
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                        }).then(function(ret) {
                            console.log(ret.data)
                        });

4. 其它詳細配置

這里只分析幾個常用的，其它的詳見上面的Api文檔。

　　(1).url: 用於請求URL

　　(2).method: 請求方式，默認為get請求

　　(3).params: 用於向URL上拼接地址，和直接在地址上拼接效果一樣，用於get請求

　　(4).data:作為請求主體被發送的數據，多用於POST請求

　　(5).headers:請求表頭

　　(6).timeout:請求超時時間，單位毫秒

　　(7).withCredentials:表示跨域請求時是否需要使用憑證，默認是false

　　(8).responseType:表示服務器響應的數據類型，可以是 'arraybuffer', 'blob', 'document', 'json'（默認）, 'text', 'stream'

　　(9).baseURL: 拼接在url的前面

　　(10).transformRequest: 允許在向服務器發送前，修改請求數據

　　(11).transformResponse: 在傳遞給 then/catch 前，允許修改響應數據

5.全局默認設置

　　全局配置baseUrl、全局配置Header、全局配置過期時間等等。

代碼分享：

                        // 配置請求的基准URL地址
                        axios.defaults.baseURL = 'https://localhost:44387';
                        // 配置請求頭信息
                        axios.defaults.headers['mytoken'] = 'hello';
                        axios.get('/api/First/GetInfor1', {
                            params: {
                                userName: 'ypf',
                                pwd: '1234'
                            },
                        }).then(function(ret) {
                            console.log(ret.data)
                        })

6. 攔截器

　　(1).可以在請求發送前攔截，比如添加header。

　　(2).在響應后進行攔截，比如返回: ret.data(), 后面就可以直接用了。

 1                         //請求前攔截
                        axios.interceptors.request.use(function(config) {
                            // console.log(config.url)
                            config.headers.mytoken = 'nihao'; //設置一下header
                            return config;
                        }, function(err) {
                            console.log(err)
                        });
                        //響應后攔截
                        axios.interceptors.response.use(function(res) {
                            var data = res.data;
                            return data;
                        }, function(err) {
                            console.log(err)
                        });
                        //這樣這里可以直接使用data了
                        axios.get('https://localhost:44387/api/First/GetInfor1', {
                            params: {
                                userName: 'ypf',
                                pwd: '1234'
                            },
                        }).then(function(data) {
                            console.log(data)
                        });

7. 其它用法補充: 取消請求和並發請求

　　 詳見Api文檔。

二. async異步編程

1.async作為一個關鍵字放到函數前面，任何一個 async 函數都會隱式返回一個 promise。

2.await 關鍵字只能在使用 async 定義的函數中使用,后面可以直接跟一個 Promise實例對象,await函數不能單獨使用。

3.async/await 讓異步代碼看起來、表現起來更像同步代碼。

            var vm = new Vue({
                el: '#myApp2',
                methods: {
                    handle1: async function() {
                        var ret1 = await axios.get('https://localhost:44387/api/Third/GetInfor4?userName=ypf&pwd=123456');
                        var userName = ret1.data.userName;
                        var pwd = ret1.data.pwd;
                        //可以直接在后面捕捉錯誤
                        var ret2 = await axios.post('https://localhost:44387/api/First/Login2', {
                            userName: userName+'001',
                            pwd: pwd+'001'
                        }).catch(error=>{
                            console.log(error);
                            
                        });
                        // console.log(ret2.data);
                        return ret2.data;                                                
                    }
                }
            });

 

 

 

!

• 作       者 : Yaopengfei(姚鵬飛)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 聲     明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
• 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。