axios 简单常用笔记
简单认知:
1、config.data是POST参数,config.params是GET参数
axios(url, [config]) + qs + application/x-www-form-urlencoded
https://github.com/axios/axios#axioscreateconfig
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Vue --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <!-- jquery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script> <style> html, body{ margin: 0; padding: 0; } #app { } </style> </head> <body> <div id="app"></div> </body> <script> axios('http://120.77.146.174:84/api/admin/user/sysUser/login', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}, data: Qs.stringify({ userAccount: 'dgeduc-b', userPwd: '123456', type: 'account', }), }).then(response => { console.log(20181203100805, response) // return response.json() }) </script> </html>
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="app"></div> </body> <script> /** * get 请求 */ axios.get('http://192.168.31.97/index.php?a=123').then(response => { console.log(20181021221522, response) }) /** * post application/x-www-form-urlencoded;charset=utf-8 * https://github.com/axios/axios#browser * 推荐使用 qs: * $ cnpm install qs * const params = qs.stringify({ 'a': 123 }) */ const params = new URLSearchParams(); params.append('a', '123'); axios.post('http://192.168.31.97/index.php', params, { headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'} }).then(response => { console.log(20181021221338, response) }) /** * post application/json;charset=utf-8 */ axios.post('http://192.168.31.97/index.php', {a: 123}).then(response => { console.log(20181021221338, response) }) // ajax(默认是application/json;charset=utf-8) axios({ method: 'post', url: 'http://192.168.31.97/index.php', data: { firstName: 'Fred', lastName: 'Flintstone' } }).then(response => { console.log(20181021225057, response) }) // ajax(指定为application/x-www-form-urlencoded;charset=utf-8) const params2 = new URLSearchParams(); params2.append('firstName', 'Fred'); params2.append('lastName', 'Flintstone'); axios({ method: 'post', url: 'http://192.168.31.97/index.php', data: params2, headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}, }).then(response => { console.log(20181021225057, response) }) </script> </html>
index.php
<?php header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Headers:x-requested-with,content-type'); // post(form) 和 get请求 var_dump($_REQUEST); // application/json;charset=utf-8 的数据必须这样使用 var_dump($GLOBALS['HTTP_RAW_POST_DATA']);