第六节：前后端交互之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: ''
                             },
                             //下面是一些额外参数
                             headers: {
                                 'token': 'xxsdfsdfxx'
                             },
                             timeout: ,

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

                         //get的原始写法
                         axios({
                             method: 'get',
                             url: 'https://localhost:44387/api/First/GetInfor1',
                             params: {
                                 userName: 'lisi',
                                 pwd:
                             },
                             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', '');
                        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:
                        }).then(function(ret) {
                            console.log(ret.data)
                        })
                        //axios.post 传递额外参数  （json格式的提交）
                        axios.post('https://localhost:44387/api/First/Login2', {
                            userName: 'lisi',
                            pwd:
                        }, {
                            //下面是一些额外参数
                            headers: {
                                'token': 'xxsdfsdfxx'
                            },
                            timeout: ,
                        }).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 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。