淺談在Vue-cli裡基於axios封裝複用請求，vue-cliaxios

淺談在Vue-cli裡基於axios封裝複用請求，vue-cliaxios

本文介紹了淺談在Vue-cli裡基於axios封裝複用請求，分享給大家，具體如下：

安裝

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

npm install axios --save

介面代理設定

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

//檔案位置：config/index.jsproxyTable: { '/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請求，沒毛病的。本文並沒有把很多功能都完整的列出來，主要是追求一個上手，剩下的東西，各位小夥伴們可以自行研究。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。