at the beginning of the project, axios was introduced into main.js, and then axios is hung on the instance through Vue.prototype.$ajax = axios; , and the request is sent by calling this.$ajax in each file.
now the project is getting bigger and bigger, and many interfaces are common, so the method in each file is not universal, so how to manage all the interfaces in a unified way, and can be introduced in each file as needed? Thank you?
our company's practice is layered, similar to mvc, can not be mounted, we are divided into:
network tool layer: encapsulates axios basic network operations
only encapsulates network operations, such as common headers,
get(url, data)
post(url, data) model layer, Encapsulate data request and network tool layer
encapsulate each module and interface
UserModel.login(username, pwd)
UserModel.register(username, pwd, code)View layer
Http.js class Http{
static post(url, data){
return new Promise(()=>{
axios.post(url, data)
.then((res)=>{
if(res.data.code==='success'){
resolve(res.data.data)
}else{
reject({code:res.data.code, summary:res.data.summary})
}
})
})
}
} UserModel I have no idea that we have called api
axios . Even if I suddenly change other network frameworks, as long as I keep the interface consistent, it will not affect the upper layer, and the testing convenience js , which can be run and tested independently, and decoupled from the view layer. No matter what view framework you use, it doesn't matter. With await , async , you can call api like a local method, one word Shuang ! can generally be divided according to RESTFul , so it can be introduced as needed, but not too large. There is no need to be too small
ArticleModel :
class ArticelModel{
static list(){}
static detail(){}
....
} at present, my practice is to bring out a js from each module and import it as needed ~
