前言

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

思想架構

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

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

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

對于統(tǒng)一的http錯誤以及業(yè)務錯誤可以在axios實例做攔截處理。

對于數(shù)據(jù)的改動在Vuex做處理【可能對應有些視圖會發(fā)生更新】

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

具體實現(xiàn)

構造兩個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是基礎接口，相同的一類可以統(tǒng)一配置到一起；
• contentType是我自定義的，在request做對應的處理

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

接口地址

method方法

contentType

responseType

...

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

serverIn

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

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狀態(tài)錯誤碼的錯誤規(guī)范，例如服務器更新
• 業(yè)務范圍內的錯誤碼，比如500提示錯誤信息，501在500的基礎上做一些特殊的業(yè)務操作。
• 確定傳輸文件方式，比如如果用blob，可以在里面封裝一個“另存為”，自動下載。

serverOut

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

總結

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

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