菜鸟看前端（vue配置axios）

axios配置

1. 在src目录下新建http文件夹，里面新建api.js,request.js,http.js

tip:所有文件夹，文件都可以重新命名

api.js用来统一管理请求地址
http.js用来封装请求函数
request.js用来封装axios
基础地址从多环境变量中以配置

// 导入即可使用基础地址
import { baseApi } from '@/config'

2. 在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;

3. 在api.js里配置请求api

module.exports = {
  login: "admin/login", // 登录
}

4. 在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
}

5. 为了方便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'
...