Home主页请求数据
一、概览
1. request请求
2. 找到合适API并传相应参数
3. 需要请求的组件调用
4. 请求方接受数据并传至展示组件
二、一起看下代码吧，这里采用vue的多文件形式
1. request.js文件用于创建请求实体
2. home.js文件用于封装request请求实现特定页面的请求发送
3. 请求调用并保存传递数据
requet.js
//引入一下
import axios from 'axios'
//创建请求实体
export function request(config){
//创建一个axios实例对象
const instance = axios.create({
baseURL:'API域名',
timeout:5000,
})
//可以编写拦截器
//发送请求
return instance(config)
}
home.js //可用来编写具体的请求参数及实现, 是对request的进一步封装
import {request} from './request.js'
export function getHomeData(sort ,format){
return request({
url:''//将来会拼接在baseURL后
params:{
sort,format
}
})
}
Home.vue //调用封装好的request请求
...
//绑定,父传子
<show-image :item-data = "res">
...
import {getHomeData} from 'network/home.js'
script:
data(){
return {
res:{}
}
}
//生命周期函数，组件创建就请求数据
create(){
//promise可直接them
getHomeData(params1,params2).then(res=>{
this.res = res; //存储数据
});
}
...