一,首先安装引入axios
1.安装axios (详细的可点击官网查看)
使用npm安装
npm install --save axios
cnpm install --save axios (推荐)
2.main.js中引入
一般都在main.js中引入,其他地方需要使用,同理。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
二,在src目录下,创建network目录,新建request.js和api.js文件
1.request.js文件
注:注释代码为根据实际需求添加使用,其他注释 Message.error 为ui框架提示信息,
import axios from 'axios';
// 统一请求地址
axios.defaults.baseURL = 'https://api-hmugo-web.itheima.net/api/public/v1'
// 超时设定
axios.defaults.timeOut = 3000;
//request 请求拦截
axios.interceptors.request.use(config => {
return config;
}, err => {
// Message.error('请求超时');
alert('请求超时')
return Promise.resolve(err);
});
// http response 拦截器
axios.interceptors.response.use(response => {
const data = response.data;
// 根据返回的code值来做不同的处理(和后端约定)
switch (data.code) {
case 401:
// 未登录 清除已登录状态
alert('未登录 清除已登录状态')
// Cookies.set('userInfo', '');
// setStore('accessToken', '');
// router.push('/login');
break;
case 403:
// 没有权限
alert('没有权限')
// if (data.message !== null) {
// Message.error(data.message);
// } else {
// Message.error("未知错误");
// }
break;
case 500:
// 错误
alert('错误')
// if (data.message !== null) {
// Message.error(data.message);
// } else {
// Message.error("未知错误");
// }
break;
default:
return data;
}
return data;
}, (err) => {
// 返回状态码不为200时候的错误处理
// Message.error(err.toString());
return Promise.resolve(err);
});
export const getRequest = (url, params) => {
// let accessToken = getStore('accessToken');
return axios({
method: 'get',
url: url,
params: params,
// headers: {
// 'accessToken': accessToken
// }
});
};
export const postRequest = (url, params) => {
// let accessToken = getStore("accessToken");
return axios({
method: 'post',
url: url,
data: params,
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded',
// 'accessToken': accessToken
// }
});
};
2.api.js 文件
// 发送请求面对api.js即可 便于维护
import {
getRequest,
postRequest,
} from '@/network/request';
//get请求
export const getSelect = (params) => {
return getRequest(params.url, params.data)
}
//post请求
export const postSelect = (params) => {
return postRequest(params.url, params.data)
}
三,组件使用请求api接口
使用封装axios请求
<template>
<div class="home">
//轮播组件代码...
</div>
</template>
<script>
//引入请求api接口
import { getSelect } from "@/network/api";
export default {
name: 'Home',
components: {},
methods: {
init() {
this.getSwiperInfo()
},
// 发送请求
getSwiperInfo() {
getSelect({
url: '/home/swiperdata',
data: {}
}).then(res => {
// 获取请求结果
console.log(res);
})
}
},
mounted() {
this.init()
}
}
</script>