1.request.js封装(所有模块都可使用)
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'a',
timeout: 5000
})
// 2.axios的拦截器
// 2.1 什么情况下需要进行拦截 =》 1.比如config中的一些信息不符合服务器要求。 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标 3.某些网络请求,比如登陆,必须要携带一些特殊的信息
// axios.interceptors // 全局拦截器
// instance.interceptors // 只拦截instance这个实例
// 2.2 请求拦截
instance.interceptors.request.use(aaa => { // 返回的参数(各种配置),名字可以自己命名,这个并不是数据信息,数据信息在main.js中打印
console.log("返回配置信息",aaa);
return aaa // 这里的aaa一定要返回出去
},err => { // 错误信息,如果请求都没有发送出去,就会来到这里
console.log("错误信息",err);
}) // 拦截instance这个实例的请求,use是使用的意思,有两个参数,两个参数都是函数
// 2.3 响应拦截
instance.interceptors.response.use(res => { // 由于服务器已经响应过了,所以这里拿到的是结果,而不是配置信息
console.log("返回的数据",res);
return res.data // 将想要的结果返回
},err => { // 获取失败
console.log("错误信息",err);
}) // 拦截instance这个实例的响应,use是使用的意思
// 3.发送真正的网络请求
return instance(config) // 实际上返回一个promise
}
2.某个模块再次封装,比如首页home.js
import { request } from "./request";
export function getHomeData() {
return request({
url: '/b/c'
})
}
3.home.vue中的使用,引入home.js
import {
getHomeData
} from "network/home";
export default {
name: 'Home',
data() {
return {
banner: [],// 轮播图数据
recommend: [],// 推荐信息数据
keywords: [],
};
},
created() {
// 请求数据,下面的res就是通过接口拿到的数据,实际数据结构,要看接口返回来的为准
getHomeData().then(res => {
this.banner = res.data.banner.list
this.recommend = res.data.recommend.list
this.keywords = res.data.keywords.list
})
}
};