[TOC] #### 1. vue 中如何發(fā)送網(wǎng)絡(luò)請求 ？ --- **選擇一: XMLHttpRequest (XHR)** 這種方式配置和調(diào)用方式都非常混亂，編碼也很復(fù)雜，所以真實開發(fā)中都不會使用 XHR 這種方式 **選擇二: jQuery-Ajax** 如果項目中使用了的 jquery，那么我們一般都會使用 jquery 自帶的 ajax 封裝，也就是 $.ajax({}) 但是，要明確一點，在 vue 整個開發(fā)中都是不需要使用 jQuery 了，如果在 vue 中還要使用 $.ajax 則使用引入 jquery。jquery 的代碼達到 1w+ 行，vue 代碼才 1w+ 行，完全沒有必要為了網(wǎng)絡(luò)請求引用這個重量級框架 **選擇三: 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 中導(dǎo)入 axios ```javascript import axios from 'axios'; ``` #### 3. 請求配置 --- 當 url 不是一個絕對 URL 時，baseURL 才會自動加在 url 前面 | 序號 | 參數(shù) | 描述 | | ------------| ------------ | ------------ | | 1 | url | 接口地址 | | 2 | baseURL | 接口根路徑 | | 3 | method | 請求類型，不區(qū)分大小寫 | | 4 | params | URL 查詢對象 | | 5 | data | 請求體數(shù)據(jù)，存放 POST 數(shù)據(jù)的地方 | | 6 | headers | 請求頭 | | 7 | timeout | 超時時間,單位: 毫秒,請求超過時間時請求將被中斷 (0 代表 不超時)| 常用請求配置參數(shù) ```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 // 創(chuàng)建 axios 實例 const instance = axios.create({ baseURL: "http://shop.cy", timeout: 500 }) // 發(fā)送網(wǎng)絡(luò)請求 instance(config).then(res => { console.log('res', res) }) ``` #### 5. 網(wǎng)絡(luò)請求模塊封裝 --- 創(chuàng)建文件: **src/network/request.js** ```javascript import axios from 'axios'; export default (config) => { // 創(chuàng)建 axios 實例 const instance = axios.create({ baseURL: "http://shop.cy", timeout: 1 }) // 響應(yīng)攔截器 instance.interceptors.response.use(response => { // 響應(yīng)成功 return response.data; // 返回接口數(shù)據(jù) }, error => { // 響應(yīng)錯誤 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) }) ```