[TOC] #### 1. vue 中如何發(fā)送網(wǎng)絡(luò)請(qǐng)求 ？ --- **選擇一: XMLHttpRequest (XHR)** 這種方式配置和調(diào)用方式都非?；靵y，編碼也很復(fù)雜，所以真實(shí)開(kāi)發(fā)中都不會(huì)使用 XHR 這種方式 **選擇二: jQuery-Ajax** 如果項(xiàng)目中使用了的 jquery，那么我們一般都會(huì)使用 jquery 自帶的 ajax 封裝，也就是 $.ajax({}) 但是，要明確一點(diǎn)，在 vue 整個(gè)開(kāi)發(fā)中都是不需要使用 jQuery 了，如果在 vue 中還要使用 $.ajax 則使用引入 jquery。jquery 的代碼達(dá)到 1w+ 行，vue 代碼才 1w+ 行，完全沒(méi)有必要為了網(wǎng)絡(luò)請(qǐng)求引用這個(gè)重量級(jí)框架 **選擇三: axios** 在 Vue1.x 的時(shí)候，Vue 官方推出了 vue-resource，它的體積相對(duì)于 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. 請(qǐng)求配置 --- 當(dāng) url 不是一個(gè)絕對(duì) URL 時(shí)，baseURL 才會(huì)自動(dòng)加在 url 前面 | 序號(hào) | 參數(shù) | 描述 | | ------------| ------------ | ------------ | | 1 | url | 接口地址 | | 2 | baseURL | 接口根路徑 | | 3 | method | 請(qǐng)求類(lèi)型，不區(qū)分大小寫(xiě) | | 4 | params | URL 查詢(xún)對(duì)象 | | 5 | data | 請(qǐng)求體數(shù)據(jù)，存放 POST 數(shù)據(jù)的地方 | | 6 | headers | 請(qǐng)求頭 | | 7 | timeout | 超時(shí)時(shí)間,單位: 毫秒,請(qǐng)求超過(guò)時(shí)間時(shí)請(qǐng)求將被中斷 (0 代表 不超時(shí))| 常用請(qǐng)求配置參數(shù) ```javascript axios({ url: "/goods/getLists", method: "post", baseURL: "http://shop.cy", params: { id: 10 }, data: { name: 'liang' }, headers: { token: "abcdef" }, timeout: 5000 }) ``` #### 4. 配置默認(rèn)值 --- **全局的 axios 默認(rèn)值** ```javascript axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 5000; ``` **自定義實(shí)例默認(rèn)值** 當(dāng)前接口地址是多個(gè)域名時(shí)，定義全局配置默認(rèn)值顯然是不合適的，因?yàn)榻涌谇熬Y不同，此時(shí)可以定義多個(gè) axios 實(shí)例 ```javascript // 創(chuàng)建 axios 實(shí)例 const instance = axios.create({ baseURL: "http://shop.cy", timeout: 500 }) // 發(fā)送網(wǎng)絡(luò)請(qǐng)求 instance(config).then(res => { console.log('res', res) }) ``` #### 5. 網(wǎng)絡(luò)請(qǐng)求模塊封裝 --- 創(chuàng)建文件: **src/network/request.js** ```javascript import axios from 'axios'; export default (config) => { // 創(chuàng)建 axios 實(shí)例 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)錯(cuò)誤 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) }) ```