[TOC] #### 1. vue 中如何發送網絡請求 ？ --- **選擇一: XMLHttpRequest (XHR)** 這種方式配置和調用方式都非?；靵y，編碼也很復雜，所以真實開發中都不會使用 XHR 這種方式 **選擇二: jQuery-Ajax** 如果項目中使用了的 jquery，那么我們一般都會使用 jquery 自帶的 ajax 封裝，也就是 $.ajax({}) 但是，要明確一點，在 vue 整個開發中都是不需要使用 jQuery 了，如果在 vue 中還要使用 $.ajax 則使用引入 jquery。jquery 的代碼達到 1w+ 行，vue 代碼才 1w+ 行，完全沒有必要為了網絡請求引用這個重量級框架 **選擇三: axios** 在 Vue1.x 的時候，Vue 官方推出了 vue-resource，它的體積相對于 jquery 小了很多，在 Vue2.x 推出后，去掉了 vue-resource，并且 vue 作者尤雨溪推薦使用 axios #### 2. 在 vue 腳手架中使用 axios ---- axios 中文文檔: <http://www.axios-js.com/zh-cn/docs> 安裝 axios 包 ``` npm install axios ``` 在 main.js 中導入 axios ```javascript import axios from 'axios'; ``` #### 3. 請求配置 --- 當 url 不是一個絕對 URL 時，baseURL 才會自動加在 url 前面 | 序號 | 參數 | 描述 | | ------------| ------------ | ------------ | | 1 | url | 接口地址 | | 2 | baseURL | 接口根路徑 | | 3 | method | 請求類型，不區分大小寫 | | 4 | params | URL 查詢對象 | | 5 | data | 請求體數據，存放 POST 數據的地方 | | 6 | headers | 請求頭 | | 7 | timeout | 超時時間,單位: 毫秒,請求超過時間時請求將被中斷 (0 代表 不超時)| 常用請求配置參數 ```javascript axios({ url: "/goods/getLists", method: "post", baseURL: "http://shop.cy", params: { id: 10 }, data: { name: 'liang' }, headers: { token: "abcdef" }, timeout: 5000 }) ``` #### 4. 配置默認值 --- **全局的 axios 默認值** ```javascript axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 5000; ``` **自定義實例默認值** 當前接口地址是多個域名時，定義全局配置默認值顯然是不合適的，因為接口前綴不同，此時可以定義多個 axios 實例 ```javascript // 創建 axios 實例 const instance = axios.create({ baseURL: "http://shop.cy", timeout: 500 }) // 發送網絡請求 instance(config).then(res => { console.log('res', res) }) ``` #### 5. 網絡請求模塊封裝 --- 創建文件: **src/network/request.js** ```javascript import axios from 'axios'; export default (config) => { // 創建 axios 實例 const instance = axios.create({ baseURL: "http://shop.cy", timeout: 1 }) // 響應攔截器 instance.interceptors.response.use(response => { // 響應成功 return response.data; // 返回接口數據 }, error => { // 響應錯誤 return Promise.reject(error); }); return instance(config) }; ``` 使用示例 ```javascript request({ url: '/test/req', params: { id: 200 } }).then(res => { console.log('res', res) }).catch(err => { console.log('err', err) }) ```