第六节：前后端交互之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 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。