1.axios本身就封裝了各種數據請求的方法

 1 執行 GET 請求
 2 
 3 // 為給定 ID 的 user 創建請求
 4 axios.get(‘/user?ID=12345‘)
 5   .then(function (response) {
 6     console.log(response);
 7   })
 8   .catch(function (error) {
 9     console.log(error);
10   });
11 
12 // 可選地，上面的請求可以這樣做
13 axios.get(‘/user‘, {
14     params: {
 
15       ID: 12345
16     }
17   })
18   .then(function (response) {
19     console.log(response);
20   })
21   .catch(function (error) {
22     console.log(error);
23   });
24 
25 執行 POST 請求
26 
27 axios.post(‘/user‘, {
28     firstName: ‘Fred‘,
29     lastName: ‘Flintstone‘
30   })
31
 
   .then(function (response) {
32     console.log(response);
33   })
34   .catch(function (error) {
35     console.log(error);
36   });

2.這裏我們根據axios提供的別名，進行調整

 1 新建一個目錄叫baseUrl，接著新建一個文件叫baseUrl.js
 2 1）首先我們在開發過程中，會有不同的環境，這裏指的是，後端會在不同的環境給我們提供對應的接口（開發環境，測試環境，灰度，線上）這個時候，我們就要對接口的baseUrl做統一處理（這樣代碼每推到一個環境，我們就不用做任何改變）
 
 3 // 獲取api的baseUrl
 4 export default function getBaseUrl () {
 5 　　let [baseUrl, urls, protocol] = [‘開發環境的api的baseUrl‘, location.href.toLowerCase(), ‘http://‘]
 6 //判斷協議，看是http還是https
 7 　　if (location.protocol === ‘https:‘) {
 8 　　　　protocol = ‘https://‘
 9 　　}
10 //一般api的baseUrl是和域名相同的，這裏我們就通過域名來判斷
11 　　if (urls.match(/測試環境的baseUrl/) && urls.match(/測試環境的baseUrl/)[0] === ‘測試環境的域名‘) {
12 　　　　baseUrl = protocol + ‘測試環境的域名‘
13 　　}
14 //線上的
15 　　if (urls.match(/線上環境的域名/) && urls.match(/線上環境的域名/)[0] === ‘線上環境的域名‘) {
16 　　　　baseUrl = protocol + ‘線上的域名‘
17 　　}
18 　　return baseUrl
19 }

3.現在我們根據axios提供的請求別名，處理兩個我們常用的請求方法

 1 新建一個文件就叫axios.js
 2 1）首先我們使用es6提供的方法，引入axios和我們封裝的getBaseUrl方法
 3 import axios from ‘axios‘
 4 import getBaseUrl from ‘文件路徑‘
 5 
 6 2)配置config
 7 let baseUrl = getBaseUrl()
 8 //這裏我們只介紹這兩個配置項，其他的不做詳細解釋，想要查看更多內容請參考官方文檔
 9 const config ={
10      //baseURL將自動加在url（這個url也就是‘/‘的路徑）上
11      baseURL:baseUrl，
12      //表示跨域請求時是否需要使用憑證，默認是false，但是對於一些，有登陸時效或者cookie憑證的請求時，這個最好加上
13      withCredentials: false
14 }
15 
16 3）處理get請求傳遞過來的參數（因為get請求的參數是拼接在請求地址上的，所以這裏我們需要手動處理一下get請求的url）
17 let urlEncode = (url, data) => {
18 　　if (typeof (url) === ‘undefined‘ || url === null || url === ‘‘) return ‘‘
19 　　if (typeof (data) === ‘undefined‘ || data === null || typeof (data) !== ‘object‘) return url
20 　　url += (url.indexOf(‘?‘) !== -1) ? ‘‘ : ‘?‘
21 　　for (let k in data) {
22 　　　　url += ((url.indexOf(‘=‘) !== -1) ? ‘&‘ : ‘‘) + k + ‘=‘ + encodeURI(data[k])
23 　　}
24 　　return url
25 }
26 
27 4）封裝post和get請求
28 
29 const get = (url, params) => {
30      //這裏的url是請求數據的傳遞過來的
31      url = urlEncode(url, params)
32      return axios.get(url,config)
33 }
34 
35 consot post = (url, params) => {
36      return axios.post(url, params, config)
37 }
38 
39 5)將post和get方法暴露出去
40 
41 export {
42      get,
43      post
44 }

1 1)引入我們第三部處理好的post和get請求方法
2 import * as axios from ‘文件路徑‘
3 
4 2）封裝
5 const Logins = params => axios.post(‘/user/login‘, params)
6 
7 const List = params => axios.get(‘/list‘, params)

5.在組件中使用

 1 1）引入我們第四步處理好的方法（需要什麽引入什麽）
 2 import { Logins, List } from ‘文件路徑‘
 3 _Login () {
 4 // 測試
 5 Logins({
 6   user_name: ‘user_name‘,
 7   pass: ‘pass‘
 8 }).then(data => {
 9 if (data.data.code === ‘0‘) {
10   console.log(data)
11 }
12 })
13 }
14 ......

axios在實際項目中的使用介紹