Nuxt中怎么进行封装数据接口在asyncData中进行请求

1572574445034.jpg

使用如图方法进行请求数据,但是接口改变的话不方便修改。
处理方法:
 /plugins目录下建立main.js 内容为:
import Vue from 'vue' // vue 文件引入 - 方便在vue方法内容直接 this 调取
import Api from './api' // 自定变量内容 其他自便

let main = {
install(Vue) {
Vue.prototype.$api = Api; // 变量的内容 后期可以在vue中 this->$api.xxx 使用
}
};

Vue.use(main); // 这里不能丢

// 这里是 为了在 asyncData 方法中使用
export default ({ app }, inject) => {
// Set the function directly on the context.app object
app.$api = Api // 名称

在nuxt.config.js文件中进行引入(如下图展示)

G(JQ~25X{RD(613JEL22EM.png

 /plugins/api.js 文件内容:
//封装数据接口
let host = 'http://www.123.com/';
module.exports = {
getIndex:host+'index/',
getBrand: host + 'brand/index/',
getArea: host + 'area/index/',
getSubject:host+'category/index/',
getZhifa:host+'zhifa/index/',
getHospitalList:host+'hospital/lists',
getHospital:host+'hospital/shows',
getDoctorList:host+'doctor/lists',
getDoctor:host+'doctor/shows',
}
在页面中使用
 async asyncData (ctx) {
let api=ctx.app.$api;
let page=ctx.query&& ctx.query.hasOwnProperty("page")?ctx.query.page:1;
let [branddata,areadata,categorydata,hospital] = await Promise.all([
ctx.$axios.get(api.getBrand),
ctx.$axios.get(api.getArea),
ctx.$axios.get(api.getSubject),
ctx.$axios.get(api.getHospitalList,{params:{
page:page}
})
])
return {
branddata: branddata.data.data,
areadata:areadata.data.data,
categorydata:categorydata.data.data,
hospital:hospital.data
}
}


 

0 个评论

要回复文章请先登录注册