快捷導(dǎo)航

vue中如何簡單封裝axios淺析

更新時(shí)間：2021年06月11日 14:24:46 作者：再敲一行就睡覺

Axios 毋庸多說大家在前端開發(fā)中常用的一個(gè)發(fā)送 HTTP 請(qǐng)求的庫，用過的都知道,篇文章主要給大家介紹了關(guān)于vue中如何簡單封裝axios的相關(guān)資料,需要的朋友可以參考下

把a(bǔ)xios注入到Vue中

import axios from 'axios';
Vue.prototype.$axios = axios;

import axios from 'axios'

axios.defaults.timeout = 5000;                        //響應(yīng)時(shí)間
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置請(qǐng)求頭
axios.defaults.withCredentials= true; //帶cookie
axios.defaults.baseURL = 'http://localhost:8080/';   //配置接口地址

//POST傳參序列化(添加請(qǐng)求攔截器)
axios.interceptors.request.use((config) => {
	//在這里可以添加序列化代碼，根據(jù)后端而定，我用的SSM后端接受Json對(duì)象，假如需要序列化可以用qs組件
    return config;
},(error) =>{
    console.log('錯(cuò)誤的傳參')
    return Promise.reject(error);
});

//返回狀態(tài)判斷(添加響應(yīng)攔截器)
axios.interceptors.response.use((res) =>{
    //對(duì)響應(yīng)數(shù)據(jù)做些事
    if(!res.data.success){
        return Promise.resolve(res);
    }
    return res;
}, (error) => {
    console.log('網(wǎng)絡(luò)異常')
    return Promise.reject(error);
});

//返回一個(gè)Promise(發(fā)送post請(qǐng)求)
export function fetchPost(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(response => {
                resolve(response);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}
返回一個(gè)Promise(發(fā)送get請(qǐng)求)
export function fetchGet(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
            .then(response => {
                resolve(response)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                reject(error)
            })
    })
}
export default {
    fetchPost,
    fetchGet,
}

簡單測試：

loginPost: function() {
		let params = {
			'password': '123',
			'username': 'admin'
		}
		http.fetchPost('/login', params).then((data) => {
			console.log(data)
		}).catch(err => {
			console.log(err)
		})
	},
hello: function() {
		http.fetchGet('/hello', "").then((data) => {
			console.log(data)
		}).catch(err => {
			console.log(err)
		})
	},

post請(qǐng)求：

get請(qǐng)求：

跨域問題，這里是在后端配置的：

在SpringMVC.xml中配置跨域：

<!-- 接口跨域配置 -->
    <mvc:cors>
        <!-- allowed-methods="*" --> <!-- 表示所有請(qǐng)求都有效 -->
        <mvc:mapping path="/**" allowed-origins="*"
                     allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                     allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
                     allow-credentials="true"/>
    </mvc:cors><!-- 接口跨域配置 -->

接口配置：

在Vue中配置創(chuàng)建一個(gè)vue.config.js：

module.exports = {
  devServer: {
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:8080',
            // 在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題
            changeOrigin: true, 
            ws: true,
            pathRewrite: {
                '^/api': '' 
                // 替換target中的請(qǐng)求地址，也就是說以后你在請(qǐng)求http://api.jisuapi.com/XXXXX這個(gè)地址的時(shí)候直接寫成/api即可
            }
        }
    }
  }
}

后端也能正常獲取cookie。