安裝依賴
npm install --save axios
# vue-axios是對axios的簡單封裝
npm install --save vue-axios
用例
在main.js里面進行全局引入
import Vue from 'vue'
// 這里引入
import Axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App'
import router from './router'
// 這里初始化
Vue.use(VueAxios, Axios)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在組件中調用方法
<template>
<section class="container">
<h1>姓名: {{ this.data.name }}</h1> // 張三
<h1>性別: {{ this.data.sex }}</h1> // 男
<h1>年齡: {{ this.data.age }}</h1> // 24
</section>
</template>
<script>
export default {
data() {
return {
data: {}
};
},
mounted() {
this.$http
.post("http://rap2api.taobao.org/app/mock/14963/api/list", {name: '12312321'})
.then(result => {
this.data = result.data;
})
.catch(err => {
console.log(err);
});
}
};
</script>
<style>
</style>
封裝
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import { get, post, uploadFile } from './module/http'
// 配置全局變量
Vue.prototype.post = post
Vue.prototype.get = get
Vue.prototype.uploadFile = uploadFile
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
組件中調用
<template>
<section class="container">
<h1>我是{{$route.query.name}},我今年{{$route.query.age}}歲了</h1>
<h1>姓名: {{ this.data.name }}</h1>
<h1>性別: {{ this.data.sex }}</h1>
<h1>年齡: {{ this.data.age }}</h1>
</section>
</template>
<script>
export default {
data() {
return {
data: {}
};
},
mounted() {
this.post("http://rap2api.taobao.org/app/mock/14963/api/list").then((result) => {
this.data = result;
});
}
};
</script>
<style>
</style>
http.js
/**axios封裝
* 請求攔截、相應攔截、錯誤統一處理
*/
import axios from 'axios';
import QS from 'qs';
import { Toast } from 'vant';
// import store from '../store/index'
// 環境的切換
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'http://api.123dailu.com/';
}
// 請求超時時間
axios.defaults.timeout = 10000;
// post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 請求攔截器
axios.interceptors.request.use(
config => {
// 每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
// 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷
const token = // store.state.token;
token && (config.headers.Authorization = token);
return config;
}, error => {
return Promise.error(error);
})
// 響應攔截器
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服務器狀態碼不是200的情況
error => {
if (error.response.status) {
switch (error.response.status) {
// 400 請求錯誤
case 400:
break;
// 401: 未登錄
// 未登錄則跳轉登錄頁面，並攜帶當前頁面的路徑
// 在登錄成功后返回當前頁面，這一步需要在登錄頁操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token過期
// 登錄過期對用戶進行提示
// 清除本地token和清空vuex中token對象
// 跳轉登錄頁面
case 403:
Toast({
message: '登錄過期，請重新登錄',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
// store.commit('loginSuccess', null);
// 跳轉登錄頁面，並將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉需要訪問的頁面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404請求不存在
case 404:
Toast({
message: '網絡請求不存在',
duration: 1500,
forbidClick: true
});
break;
// 408 請求超時
case 408:
err.message = '請求超時(408)';
break;
// 500 服務器錯誤
case 500:
err.message = '服務器錯誤(500)';
break;
case 501:
err.message = '服務未實現(501)';
break;
case 502:
err.message = '網絡錯誤(502)';
break;
case 503:
err.message = '服務不可用(503)';
break;
case 504:
err.message = '網絡超時(504)';
break;
case 505:
err.message = 'HTTP版本不受支持(505)';
break;
// 其他錯誤，直接拋出錯誤提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
});
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export const get = (url, params) => {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
if (ds.resultCode === '1') {
resolve(ds.resultData);
} else {
resolve(ds.resultMsg);
}
}).catch(err => {
reject(err.data)
})
});
}
/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export const post = (url, params) => {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params)).then(res => {
const ds = res.data;
if (ds.resultCode === '1') {
resolve(ds.resultData);
} else {
resolve(ds.resultMsg);
}
}).catch(err => {
reject(err);
})
});
}
/**
* POST方法封裝（文件上傳）
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
* @param {String} headers [設置請求headers]
*/
export const uploadFile = (url, params, headers) => {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params), headers).then(res => {
if (ds.resultCode === '1') {
resolve(ds.resultData);
} else {
resolve(ds.resultMsg);
}
}).catch(err => {
reject(err.data)
})
})
}
