安装依赖
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)
})
})
}
