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

使用如图方法进行请求数据，但是接口改变的话不方便修改。

处理方法：

/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文件中进行引入(如下图展示)

/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

}

}