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

寫在前面：

自從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