axios配置
- 在src目录下新建http文件夹,里面新建
api.js
,request
.js,http.js
tip:所有文件夹,文件都可以重新命名
api.js
用来统一管理请求地址
http.js
用来封装请求函数
request.js
用来封装axios
基础地址从多环境变量中以配置
// 导入即可使用基础地址
import { baseApi } from '@/config'
- 在request.js下封装axios
基础地址从多环境变量中以配置,我们导入即可,在axios实例中设置基础地址
//1. 导入axios
import axios from 'axios'
// 根据环境不同引入不同baseApi地址
import { baseApi } from '@/config'
// 导入loading
import { Loading } from 'element-ui';
let loadingInstance; // 创建loading变量
// 2. 创建axios实例
const Server = axios.create({
baseURL: baseApi, // 基础url地址
timeout: 3000, // 请求超时时间
})
//3. 请求拦截器配置
Server.interceptors.request.use((config) => {
// 不传递默认开启loading
if (!config.hideloading) {
loadingInstance = Loading.service({ fullscreen: true });
}
// 可以在请求拦截里配置header头,携带token
// 先获取本地存储,我的token是存储在sessionStorage
let token ='Bearer '+ sessionStorage.getItem('token')
if(token){
config.headers['authorization'] = token
}
return config;
}, (error) => {
return Promise.reject(error);
});
//4. 相应拦截器
Server.interceptors.response.use((response) => {
// 关闭loding
loadingInstance.close();
//过滤返回的data值
if (response.status == 200) {
// return response.data;
return response;
}
return response;
}, (error) => {
return Promise.reject(error);
});
//5. 抛出对象接口
export default Server;
- 在api.js里配置请求api
module.exports = {
login: "admin/login", // 登录
}
- 在http.js里面封装请求函数
先导入封装好的axios
在导入请求的api地址
基础地址已经配在axios实例中,所以只设置请求路径就好
// 导入封装好的axios
import Server from '../http/request'
// 导入api 接口
import api from '../http/api'
//
function login(data) {
return Server({
url: api.login, // 请求地址
method: "post", // 请求方式
data: data, // 请求传递的参数
hideloading: false // 隐藏 loading 组件
})
}
// 导出封装好的请求函数
export default {
login
}
- 为了方便i使用,把封装函数的http.js,挂载在main.js中
...
import axios from './http/http'
Vue.prototype.$axios = axios
...
在组件中使用
...
methds:{
async login(){
let {data:res}= await this.$axios.login(请求需要的参数)
}
}
...
如果不挂载在全局,在那个页面使用在那个页面引入,直接使用就即可
...
import {login} from '../../http/http'
...