把axios注入到vue中

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

import axios from 'axios'

axios.defaults.timeout = 5000;                        //響應時間
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //www.cppcns.com配置請求頭
axios.defaults.withCredentials= true; //帶cookie
axios.defaults.baseURL = 'http://localhost:8080/';   //配置介面地址

//POST傳參序列化(新增請求攔截器)
axios.interceptors.request.use((config) => {
	//在這裡可以新增序列化程式碼，根據後端而定，我用的SSM後端接受Json物件，假如需要序列化可以用qs元件
    return config;
},(error) =>{
    console.log('錯誤的傳參')
    return Promise.reject(error);
});

//返回狀態判斷(新增響應攔截器)
axios.interceptors.response.use((res) =>{
    //對響應資料做些事
    if(!res.data.success){
        return Promise.resolve(res);
    }
    return res;
},(error) => {
    console.log('網路異常')
    return Promise.reject(error);
});

//返回一個Promise(傳送post請求)
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)
            })
    })
}
返回一個Promise(傳送get請求)
export function fetchGet(url,param) {
    return new Promise(
 
程式設計客棧(resolve,reject) => {
        axios.get(url,{params: param})
            .then(response => {
                resolve(response)
            },err => {
                reject(err)
     VeBWxTiU       })
            .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請求：

get請求：

跨域問題，這裡是在後端配置的：

在SpringMVC.xml中配置跨域：

<!-- 介面跨域配置 -->
    <mvc:cors>
        <!-- allowed-methods="*" --> <!-- 表示所有請求都有效 -->
        <mvc:mapping path="/**" allowed-origins="*"
                     allowed-methods="POST,GET,OPTIONS,DELEhttp://www.cppcns.comTE,PUT"
                     allowed-headers="Content-Type,Access-Control-Allow-Headers,Authorization,X-Requested-With"
                     allow-credentials="true"/>
    </mvc:cors><!-- 介面跨域配置 -->

介面配置：

在Vue中配置 建立一個vue.config.js：

module.exports = {
  devServer: {
    proxy: {
        '/api': {
            target: 'http://127.0.0.1:8080',// 在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
            changeOrigin: true,VeBWxTiU   ws: true,pathRewrite: {
                '^/api': '' 
                // 替換target中的請求地址，也就是說以後你在請求http://api.jisuapi.com/XXXXX這個地址的時候直接寫成/api即可
            }
        }
    }
  }
}

後端也能正常獲取cookie。

當然要注意下面這個配置，這個是帶cookie的原因

axios.defaults.withCredentials= true;

總結

到此這篇關於vue中如何簡單封裝axios的文章就介紹到這了,更多相關vue封裝axios內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！