封装axios请求接口
传统的axios请求只适合小型项目那种只有几个请求接口的但是一但项目过大接口过多的话使用传统的axios请求就显得不太合理而且太过于麻烦 比如请求接口发生了改变的话那么就得需要一个一个的去更改 假如有一百个接口的话就需要更改一百个页面里面的接口太过于麻烦而且不太容易维护 这时可以把请求接口进行二次封装既减少代码的冗余而且利于后期代码维护
第一步先创建两个文件夹 一个http一个api
在http文件夹里创建http.js
里面引入下载的axios然后设置默认路径和请求方式
import axios
from 'axios';
if (process
.env
.NODE_ENV == 'development') {
axios
.defaults
.baseURL
= 'http://120.53.31.103:84/';
}
if (process
.env
.NODE_ENV == 'production') {
axios
.defaults
.baseURL
= 'https://wap.365msmk.com';
}
axios
.defaults
.timeout
= 5000;
axios
.interceptors
.request
.use(
config
=>{
config
.headers
={DeviceType
:'H5'}
return config
}
)
export function get(url
, params
) {
return new Promise((resolve
, reject
) => {
axios
.get(url
, {
params
: params
}).then(res
=> {
resolve(res
)
}).catch(err
=> {
reject(res
)
})
})
}
export function post(url
, params
) {
return new Promise((resolve
, reject
) => {
axios
.post(url
, params
).then(res
=> {
resolve(res
.data
)
}).catch(err
=> {
reject(err
.data
)
})
})
}
然后在api文件夹里创建api.js接着使用解构赋值的方式因为http.js里面的get和post 解构赋值可以在一个文件里引入自己想要引入的属性和方法
import { get, post
} from "../http/http.js";
export function getAppIndex() {
return get('api/app/recommend/appIndex')
}
这种二次封装api的方法非常简单在views的任何组件里面都可以导入封装好的api接口
import { getAppIndex
} from "../../api/api";
async mounted() {
var res
= await getAppIndex();
this.list
= res
.data
.data
;
},
二次封装接口api既减少代码的冗余又利于后期维护
