axios请求实战

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;		//存储数据
		});
	}
...