前言

如果你做的是比較大型的項目，有非常非常多的api需要做配置和維護，那么下面這篇文章可能就可以幫助你啦～

思想架構

用的是promise機制處理，將一次請求分成了三段： 頁面 —— Vuex —— axios實例 其中，Vuex調用axios實例時還會用到api配置文件。

api配置文件的作用之后會說明。

整個流程：頁面觸發Vuex的actions，對應把需要的參數傳過去，Vuex再調用axios實例，把對應的api配置和參數傳到axios實例：

對于統一的http錯誤以及業務錯誤可以在axios實例做攔截處理。

對于數據的改動在Vuex做處理【可能對應有些視圖會發生更新】

對應頁面本身的一些變量的操作。

具體實現

構造兩個axios實例：serverIn和serverOut，我把這兩個實例這樣處理：

Vue.prototype.$ajax = serviceIn Vue.prototype.$axios = serviceOut 復制代碼

其中$axios部分不說，不過我把作者的response刪掉了……

考慮到有時候還是需要用到headers之類的信息。

來看看serviceIn如何使用：

this.$ajax({...api['login'],data }).then... 復制代碼

那這里一定很好奇api['login']是什么吧？

export default {login: {url: baseApi + '/login',method: 'post',contentType: 'normal'} } 復制代碼

這是我api文件下一個app里的部分代碼：

• baseApi是基礎接口，相同的一類可以統一配置到一起；
• contentType是我自定義的，在request做對應的處理

然后把關于這個接口所有和業務無關的但是和服務器請求有關的配置都可以丟到這。

接口地址

method方法

contentType

responseType

...

我這樣做的目的是把與后端對接的api文檔通過配置表的方式結合起來，作為前端配置和查閱使用。

serverIn

對應的是公司內的請求，可以和后端商量定義好一些規范：

request

• 主要是Content-Type的定義，如果有多種……
• axios在data方面需要做一層處理：

const qs = require('querystring') // request interceptor serviceIn.interceptors.request.use(config => {// 如果是'application/x-www-form-urlencoded'，需要做特殊的處理config.headers['Content-Type'] = 'application/x-www-form-urlencoded'config.data = qs.stringify({...config.data}) }, error =>{} 復制代碼

reponse

• HTTP狀態錯誤碼的錯誤規范，例如服務器更新
• 業務范圍內的錯誤碼，比如500提示錯誤信息，501在500的基礎上做一些特殊的業務操作。
• 確定傳輸文件方式，比如如果用blob，可以在里面封裝一個“另存為”，自動下載。

serverOut

對應的外部，第三方的接口，這里就不多說啦～

總結

以上是生活随笔為你收集整理的D2 AJAX 封装策略的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。