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

標籤：login   default   要求方法   protocol   type   erro   data   get   export   

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: 1234516     }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 baseUrl19 }

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: false14 }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 url20 　　url += (url.indexOf(‘?‘) !== -1) ? ‘‘ : ‘?‘21 　　for (let k in data) {22 　　　　url += ((url.indexOf(‘=‘) !== -1) ? ‘&‘ : ‘‘) + k + ‘=‘ + encodeURI(data[k])23 　　}24 　　return url25 }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      post44 }

4.根據不同的介面封裝不同的要求方法（這個方法是用來直接擷取資料的）

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在實際項目中的使用介紹