技術標籤：axios配置vue

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: baseUrl, // 基礎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'
...