前言：
最近在進行項目前端架構(gòu)的過程中白胀，一直在想如何封裝異步請求的apiService椭赋，達到更規(guī)范的應(yīng)用和更簡便的書寫。剛開始想使用定義抽象類的方式進行書寫或杠，后面發(fā)現(xiàn)不可行哪怔，并不能達到自己想象的減少代碼量，并且能保持很強的重用性向抢。最后想到使用構(gòu)造函數(shù)的方式進行封裝认境。具體代碼實現(xiàn)如下：
一、攔截器的代碼實現(xiàn)：
import axios from 'axios'
// 創(chuàng)建axios實例
const service = axios.create({
// baseURL: process.env.BASE_API, // api的base_url
timeout: 30000 // 請求超時時間
});
// request攔截器
service.interceptors.request.use(config => {
//此處進行token等數(shù)據(jù)處理
return config
}, error => {
// Do something with request error
Promise.reject(error)
});
// respone攔截器
service.interceptors.response.use(
response => {
const res = response.data;
if (res.code !== 200) {
//此處進行異常處理
return Promise.reject(res);
}
return response
},
error => {
//此處進行異常處理
return Promise.reject(error)
}
);
export default service
首先實現(xiàn)攔截器的配置挟鸠，對項目實際使用時的錯誤提示叉信、token的綁定進行統(tǒng)一處理
二、apiService的構(gòu)造函數(shù)實現(xiàn)
import request from './request'
export class ApiService {
constructor(url) {
this.baseUrl = url;
}
//獲取列表數(shù)據(jù)
list(query) {
return request({
url: this.baseUrl + '/list',
method: 'get',
params: query
})
}
//新增數(shù)據(jù)
create(data) {
return request({
url: this.baseUrl + '/create',
method: 'post',
data: data
})
}
//修改數(shù)據(jù)
update(data) {
return request({
url: this.baseUrl + '/update',
method: 'put',
data: data
})
}
//刪除數(shù)據(jù)
delete(id) {
return request({
url: this.baseUrl + '/delete/' + id,
method: 'delete'
})
}
//獲取數(shù)據(jù)詳情
view(id) {
return request({
url: this.baseUrl + '/view/' + id,
method: 'get'
})
}
}
在實際使用時艘希，僅需定義如userApiService硼身，代碼如下：
import {ApiService} from './apiService'
export const UserApiService = new ApiService('/user');
在實際使用頁面中鉴未，引用UserApiService ，就可以調(diào)用list鸠姨、create铜秆、update、delete讶迁、view等方法了连茧。當然，實際使用中會有自己的特殊需求巍糯，如提交等請求啸驯，需要特殊的url拼接。但是祟峦，總的來說前后端一定遵循公司內(nèi)部規(guī)范罚斗，用這樣的寫法可以達到較少的代碼量實現(xiàn)較高的復用性。
最后宅楞，希望大家有更好的實現(xiàn)方案可以在評論中告知针姿，互相進步學習。
