[TOC] #### 1. 什么是 axios？ --- axios中文網(wǎng)：[http://www.axios-js.com](http://www.axios-js.com) github倉庫地址：[https://github.com/axios/axios](https://github.com/axios/axios) Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中 #### 2. axios 實例方法 --- ```javascript axios.get(url, config) axios.post(url, data, config) ``` #### 3. CDN 方式示例 --- ```html <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> axios.get('http://127.0.0.1/1.php').then(res => { // 接口數(shù)據(jù) console.log(res.data) }) </script> ``` #### 4. 發(fā)送get請求，攜帶參數(shù) --- **請求參數(shù)屬性： params: {} ** ```javascript axios.get('http://127.0.0.1/1.php', { params: { id: 1, name: 'liang' } }) .then(res=>{ // 接口數(shù)據(jù) console.log(res.data) }) ``` #### 5. 發(fā)送post請求，攜帶參數(shù) --- **參數(shù)直接作為 `axios.post()` 的第二個參數(shù)，而不像get請求需要寫在 params 中** ```javascript axios.post('http://127.0.0.1/1.php', { id: 1, name: 'liang' }) .then(res=>{ console.log(res.data) }) ``` **特別注意：PHP則需要使用以下方式接收POST數(shù)據(jù) $_POST是接收不到的** ```php file_get_contents('php://input'); ``` **解決方案：使用Qs處理下數(shù)據(jù)，此時PHP可以使用$_POST接收到參數(shù)了** 在bootcdn搜索qs，引入qs的cdn，使用 Qs.stringify 處理數(shù)據(jù) ```html <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 引入 qs 在bootcdn搜索qs --> <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script> <script> axios.post('http://127.0.0.1/1.php', Qs.stringify({ id: 1, name: 'liang' })) .then(res=>{ console.log(res.data) }) </script> ``` #### 6. axios 全能型 --- **get** ```javascript axios({ url: 'http://127.0.0.1/1.php', method: 'get', params: {id: 1} }).then(res => { console.log(res.data) }) ``` **post** ```javascript axios({ url: 'http://127.0.0.1/1.php', method: 'post', data: Qs.stringify({id: 1}) }).then(res => { console.log(res.data) }) ``` #### 7. xm-select --- **推薦一個下拉多選的插件，該插件文檔中的示例，也是使用的 axios** xm-select：[https://gitee.com/maplemei/xm-select](https://gitee.com/maplemei/xm-select)