在 vue-cli 裡基於 axios 封裝複用請求

OBKoro1發表於2017-11-06
VueiOS封裝

寫在前面：

自從Vue2.0推薦大家使用 axios 開始，axios 被越來越多的人所瞭解。使用axios發起一個請求對大家來說是比較簡單的事情，但是axios沒有進行封裝複用，專案越來越大，引起的程式碼冗餘。就會非常麻煩的一件事。所以本文會詳細的跟大家介紹，如何封裝請求，並且在專案元件中複用請求。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。

本文首發於我的個人blog：obkoro1.com

安裝

只用安裝一個axios就可以了。

npm install axios --save 複製程式碼

介面代理設定

為了請求可以正常傳送，我們一般要進行一個介面代理的配置，這樣可以避免請求跨域，專案打包之後，後端一般也要搭建一個nginx之類的東西進行轉發請求，不然請求會因為跨域問題失敗的。

//檔案位置：config/index.js
proxyTable: {
  '/api': {
    target: 'http://47.95.xxx.246:8080',  // 通過本地伺服器將你的請求轉發到這個地址
    changeOrigin: true,  // 設定這個引數可以避免跨域
    pathRewrite: {
      '/api': '/'
    }
  },
},複製程式碼

設定好了之後，當你在專案中要呼叫http://47.95.xxx.246:8080這個伺服器裡面的介面，可以直接用/api代替伺服器地址。

發起請求

main.js入口檔案中：

import axios from 'axios';//引入檔案
Vue.prototype.$http = axios;//將axios掛載到Vue例項中的$ajax上面,在專案中的任何位置通過this.$http使用複製程式碼

沒有封裝發起請求：

//沒有封裝的時候，在元件中發起請求的方式：
   this.$ajax({
       url:'/api/articles',//api 代理到json檔案地址，後面的字尾是檔案中的物件或者是陣列
       method:'get',//請求方式
       //這裡可以新增axios文件中的各種配置
     }).then(function (res) {
       console.log(res,'成功');
     }).catch(function (err) {
       console.log(err,'錯誤');
     })
//還可以像下面這麼簡寫
  this.$ajax.get('api/publishContent').then((res) => {
   console.log(res,'請求成功')
  },(err)=>{
    console.log(err,'請求失敗');
  });複製程式碼

封裝請求

封裝的時候，我通常喜歡把請求抽象成三個檔案，檔案位置放在src中，只要你能引用到，就沒問題，如下圖所示：

建立三個.js檔案，裡面我都很認真的註釋了，我就直接貼圖片了，在文末我把這三個檔案的地址發出來，需要的小夥伴自取。

fetch.js：

url.js:

api.js

在元件裡面如何使用介面：

封裝axios檔案地址在這裡：傳送門

程式碼註釋什麼的，已經蠻多了，跟著文章一步一步走，實現封裝axios請求，沒毛病的。本文並沒有把很多功能都完整的列出來，主要是追求一個上手，剩下的東西，各位小夥伴們可以自行研究。

最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！本人寫文章本著交流記錄的心態，寫的不好之處，不撕逼，但是歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。
blog網站 and 掘金個人主頁

以上2017.11.6

相關文章