一，axios封装request请求，并封装api请求接口的方式
在vue项目目录scr 下新建 network目录 再新建request .js文件
//request .js 文件
// 引入axios请求库
import axios from 'axios'
// 封装Promise实例
export function request (config) {
// 1.创建axios实例
const instance = axios.create({
// 1.1定义统一的请求地址
baseURL: 'https://autumnfish.cn/',
// 1.2定义统一的请求超时设置
timeOut: 5000
})
// 2.1添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log(config);
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 2.2添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log(response);
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 3 发送真正的网络请求
// 由于instance实例本身返回的就是promise实例
// 再调用的时 也就可以使用.then() 拿到成功的 .catch() 返回值失败的返回值
return instance(config)
}
// api请求接口文件
//引入axios封装的request请求
import {
request} from './request'
// 第一种写法 写好固定的地址接口 和参数
export function getSwiper() {
return request({
url: '/banner?type=1',
// params: {
// type: 1
// }
})
}
// 第二种写法 传递地址接口参数过来
export function getRecommend(params) {
return request({
url: params
})
}
// 第三种写法 传递整个对象参数过来
export function getRecommend(params) {
return request({
url: params.url,
params: params.data
})
}
// post请求方式 此处的参数名是data而不是params 调用方式跟第三种写法 get请求一样，
// 注意:官方规定
// get请求 参数名使用 params
// post等其他请求 参数名基本使用 data 如下：
// export function getRecommend(params) {
// return request({
// url: params.url,
// data: params.data
// })
// }
在组件中调用请求，此处只展示script，替它的template，style已省略，可自行添加测试
<script>
// 引入api请求接口文件
import {
getSwiper,
getRecommend
} from '../../network/home';
export default {
name: 'Recommend',
data () {
return {
banners:'',
recommend:'',
hotlist: ''
}
},
components:{
},
created() {
// 第一种 调用
getSwiper().then(res =>{
console.log(res);
this.banners = res.data.banners
})
// 第三种 调用 (参数比较少时)
getRecommend('/personalized?limit=5').then(res =>{
console.log(res);
this.recomlist = res.data.result
})
// 第三种 调用 (参数很多时)
getRecommend({
url: '/playlist/detail',
data: {
id: 19723756,
// limit: 10,
// key: 'lzx'
}
}).then(res =>{
console.log(res);
this.hotlist = res.data.playlist.tracks
})
},
methods:{
}
}
</script>
二，request请求到挂载全局使用的方式
在保证request请求文件的基础上实现
- request文件 （参考章首）
- 在maim.js中引入request文件，挂载到vue原型链上
- 在需要使用的地方，使用this.$request()调用即可
可以参考如下代码便于理解：
// 2. main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import Vant from 'vant';
import 'vant/lib/index.css';
// 2.1 引入request文件
import {
request } from './network/request';
import APlayer from '@moefe/vue-aplayer';
Vue.use(APlayer);
Vue.use(Vant);
// 2.2 挂载到vue原型链 全局使用（避免每次使用引入）
Vue.prototype.$request = request
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: {
App },
template: '<App/>'
})
3.在组件中不用导入，就可以调用请求
<script>
export default {
name: 'test',
data () {
return {
infoList: ''
}
},
components:{
},
created() {
// 页面初始化时调用
this.$request({
url: '/personalized?limit=10'
}).then( res =>{
console.log(res);
this.recomlist = res.data.result
})
},
methods:{
// 自定义事件调用
handleSearch() {
this.$request({
url: '/search?keywords=海阔天空'
}).then( res =>{
console.log(res);
this.infoList = res.data.result
})
}
}
}
</script>
本文纯属学习过程中的个人理解，如若不当之处，敬请评论指出。