Vue2电商实战项目(二)

发布时间 2023-04-12 11:01:32作者: 清安宁

最新接口请求地址

- http://gmall-h5-api.atguigu.cn/

	- 示例: http://gmall-h5-api.atguigu.cn/api/product/getBaseCategoryList

axios二次封装

- 前端请求方法大概有这几种: XMLHttpRequest,fetch,JQuery,axios(推荐)

- 为什么要二次封装axios,为了'请求拦截器'和'响应拦截器'

	- 请求拦截器: 可以在请求发送之前,处理一些业务
	- 响应拦截器: 当服务器返回数据时,处理一些业务
	
- 安装 axios: npm install axios
  • 二次封装配置
### src.api.request.js

import axios from 'axios'

const requests = axios.create({ // 创建一个 axios实例并配置
	baseURL:'/api', // 以后发请求,无需再写'/api'路径
	timeout:5000, // 超时5秒即视为请求失败
})

requests.interceptors.request.use((config)=>{
	return config // config里面有一个headers请求头,是重要参数
})

requests.interceptors.response.user((res)=>{
	return res.data
},(error)=>{
	return Promise.reject(new Error('faile'))
})

export default requests // 最后导出