零基礎(chǔ)學透types實戰(zhàn)教程35封裝接口請求

1、 零基礎(chǔ)學透 ypeScr pt / 6 2 封裝接口請求封裝接口請求更新時間 2019 07 25 10:03:43加緊學習，抓住中心，寧精勿雜，寧專勿多。我們在開發(fā)中廣泛使用的axos調(diào)用接 ，為了更好地調(diào)用，做一些全局的 ，我們通常會對其進行一下封裝，本小節(jié)我們就來看下如何使用TypeScr pt對它進行封裝，使其同時能夠有很好的類型支持。首先我們需要安裝axos，如何安裝依賴我們在1.3小節(jié)學習過了，這里直接安裝：npm install axios我們在src文件夾下創(chuàng)建utils文件夾，然后在ut s文件夾創(chuàng)建*axos.ts文件，axos這個插件自帶 文件，所以我們不需要另外安裝了

2、。先來看下最基礎(chǔ)的封裝：import axios Axios nstance AxiosReq onfig AxiosPromise AxiosResponse from 'axios' / 引入axios和定義在node modules/axios/index ts文件里的類型class HttpRequest / 定義 個接口請求類，用于創(chuàng)建 個axios請求實例constructor(public baseUrl string) / 這個類接收 個字符串參數(shù)，是接口請求的基本路徑this baseUrl = baseUrlpublic request(options Ax

3、iosReq onfig) AxiosPromise / 我們實際調(diào)用接 調(diào)用實例的這個方法，他返回 個AxiosPromisethis interceptors(instance options url) / 調(diào)用interceptors方法使 器生效return instance(options) / 最后返回AxiosPromiseprivate interceptors(instance Axios nstance url? string) / 定義這個函數(shù)用于添加全局請求和響應(yīng) 邏輯/ 在這里添加請求和響應(yīng)private mergeConfig(options AxiosReq on

4、fig) AxiosReq onfig / 這個方法用于合并基礎(chǔ)路徑配置和接口單獨配置return Obje sign( baseURL this baseUrl options)export default HttpRequest我們封裝了這個類之后，里面的baseUr 一般本地開發(fā)環(huán)境的基礎(chǔ)路徑和線 生產(chǎn)環(huán)境的基礎(chǔ)路徑是不一樣的，所以可以根據(jù)當前是開發(fā)環(huán)境還是生產(chǎn)環(huán)境做 ，應(yīng)用不同的基礎(chǔ)路徑。這里我們要寫在一個配置文件里，我們在src文件夾下創(chuàng)建一個config文件夾，然后在這個文件夾創(chuàng)建一個index.ts文件，在里面配置生產(chǎn)和開發(fā)環(huán)境接基礎(chǔ)路徑：/ src/config/index t

5、s export default api devApiBaseUrl '/test/api/ ' proApiBaseUrl '/api/ '然后我們在axos.ts文件里直接引入接 配置，然后 當前環(huán)境：/ 其他代碼省略import config from '/config' / 代表src 級 錄，是我們在vue config js文件里配置的const api devApiBaseUrl proApiBaseUrl = configconst apiBaseUrl = process env NODE ENV = 'producti

6、on' ? proApiBaseUrl devApiBaseUrl/ process env NODE ENV是vue服務(wù)內(nèi)置的環(huán)境變量，有兩個值，當本地開發(fā)時是development，當打包時是production/ 其他代碼省略接下來我們就可以將這個ap BaseUr 作為默認值傳入HttpRequest的參數(shù)：/class HttpRequest / 定義 個接口請求類，用于創(chuàng)建 個axios請求實例constructor(public baseUrl string = apiBaseUrl) / 這個類接收 個字符串參數(shù)，是接口請求的基本路徑this baseUrl = bas

7、eUrl/接下來我們來完善 器，在類中nterceptors方法內(nèi)添加請求 器和響應(yīng) 器，實現(xiàn)對所有接 請求的統(tǒng)一處理：const instance Axios nstance = axios create() / 這里使用axios create方法創(chuàng)建 個axios實例，他是 個函數(shù)，同時這個函數(shù)包含多個屬性，就像我們前面講的計數(shù)器的例子options = this mergeConfig(options) / 合并基礎(chǔ)路徑和每個接口單獨傳入的配置， 如url 參數(shù)等private interceptors(instance Axios nstance url? string) / 定義這

8、個函數(shù)用于添加全局請求和響應(yīng) 邏輯/ 在這里添加請求和響應(yīng)instance interceptors request use(config AxiosReq onfig) => / 接口請求的所有配置，都在這個config對象中，他的類型是AxiosReq onfig，你可以看到他有哪些字段/ 如果你要修改接口請求配置，需要修改 axios defaults 的字段值return config(error) => return Promise reject(error)instance interceptors response use(res AxiosResponse) =&g

9、t; const data = res / res的類型是AxiosResponse<any>，包含六個字段，其中data是服務(wù)端返回的數(shù)據(jù)const code msg = data / 通常服務(wù)端會將響應(yīng)狀態(tài)碼 提示信息 數(shù)據(jù)等放到返回的數(shù)據(jù)中if (code = 0) / 這里我們在服務(wù)端將正確返回的狀態(tài)碼標為0console error(msg) / 如果不是0，則打印錯誤信息，我們后面講到U組件的時候，這里可以使用消息窗提示return res / 返回數(shù)據(jù)(error) => / 這里是遇到報錯的回調(diào)return Promise reject(error)請求時的

10、通過給傳入回調(diào)函數(shù)來處理，這個回調(diào)函數(shù)有一個參數(shù)，就是這次請求的配置對象。如果你需要修改請求的配置，需要修改ax os.defau ts 的字段，來修改全局配置。比如你要在header中添加字段"Content-Type"，需要這樣添加：axios defaults headers post'Content-Type' = 'application/x-www-form-urlencoded'到這里我們這個axos請求類就封裝好了， 面我們講了一般服務(wù)端會將狀態(tài)碼、提示信息和數(shù)據(jù)封裝在一起，然后作為數(shù)據(jù)返回，所以我們調(diào)用所有ap 請求返回的數(shù)

11、據(jù)格式都是一樣的，那么我們就可以定義一個接 來指定返回的數(shù)據(jù)的結(jié)構(gòu)，我們在src/utils/axios.ts文件中定義c ass HttpRequest 前加一個接 定義，并且導出：export interface ResponseData code numberdata? any msg string你可以根據(jù)你服務(wù)端實際返回的情況，來定義這個接 ResponseData，我這里data字段設(shè)為可選的。接下來我們來簡單使用一下。在src文件夾下創(chuàng)建一個api文件夾，然后再這個文件夾創(chuàng)建一個index.ts文件，在這里 創(chuàng)建請求實例：/ src/api/index tsimport Http

12、Request from '/utils/axios' export * from '/utils/axios'export default new HttpRequest()我們把這個請求類引進來，然后默認導出一個這個類的實例。后面我們要進行接 請求的時候，要對接 進行分類，比如和用戶相關(guān)的，和數(shù)據(jù)相關(guān)的等等。這里我們先添加一個登陸接 的請求，所以在api文件夾下創(chuàng)建一個user.ts文件，在這里創(chuàng)建一個登陸接 請求方法：nstance. nterceptors.request.use/ src/api/user tsimport axios Response

13、Data from ' /index' import AxiosPromise from 'axios'interface LoginReqArgu nterface user name stringpassword number stringexport const loginReq = (data LoginReqArgu nterface) AxiosPromise<ResponseData> => return axios request(url '/api/user/login' datamethod 'POS

14、T')這里我們封裝登錄請求方 oginReq，指定他需要一個參數(shù)，參數(shù)類型要符合我們定義的Log nReqArguInterface 接指定的結(jié)構(gòu)，這個方法返回一個類型為Ax osProm se 的Prom se，AxosProm se這個接 是axos 文件內(nèi)置的類型，他可以傳入一個泛型變量參數(shù)，用于指定ap 請求返回的結(jié)果中data字段的類型。為什么我們要這樣封裝ap 的請求，而不是直接在需要調(diào)用接 的地方使用ax os.get 或者ax os.request 這些方法直接請求呢？這是因為我們一個ap 請求可能多個地方需要用到，這里的登錄接 復用性很低，但是一些其他接 比如獲取數(shù)據(jù)

15、的接 ，可能多個地方會用到，所以我們封裝一下，可以統(tǒng)一管理，以后接 升級，就只需要改一個地方就可以了。接下來我們調(diào)用一個這個請求試一下，我們在src/views/Home.vue文件里先調(diào)用一下，只是為了先感受一下調(diào)用請 求的方式，登錄接 我們會在下個小節(jié)放到登錄頁實現(xiàn)。打開Home.vue文件后，我們首先要引入這個請求方法：import loginReq from '/api/user'然后下面我們在Home這個組件類里添加mounted 周期鉤子函數(shù)，在這里調(diào)用這個ap 請求方法：時，當我們輸入res 然后輸入. 之后，編輯器列出了六個可 的屬性：data、status、s

16、tatusText、headers、conf g和request，當我們選中data 然后輸入. 后，編輯器列出了三個可 屬性：code、data和msg，這三個是我們自 通過接 ResponseData 定義的。export default class Home extends Vue public mounted() loginReq( user name 'Lison' password 123 ) then(res) => console log(res data code)在編寫這些代碼的時候，你可以看到，當你書寫 og nReq() 之后，編輯器提示你： Expected 1 arguments, but got0. ，這是因為我們在定義og nReq的時候指定了一個參數(shù)，當你傳入一個空對象 的時候，編輯器會提示你： Type '' s m ss ng the fo ow ng propert es from type 'Log nReqArguInterface': user_name, password ，這是因為我們指定了參數(shù)必須包含user_name和password兩個字段。這樣我們封裝好ap 請求方法