(精华2020年5月12日更新) vue实战篇 axio.js封装和环境配置
首先安装
npm i cross-env
package.jsom
"scripts": {
"test":"cross-env scene=test webpack --config webpack.config.js",
"dev": "cross-env scene=dev webpack-dev-server --config webpack.config.js",
"build": "cross-env scene=prod webpack --config webpack.config.js"
},
再到webpack.config.js配置
// 插件
plugins: [
new webpack.DefinePlugin({
'sceneParam': JSON.stringify(process.env.scene),
'laney':JSON.stringify('laney'),
'test':'"kkkkk"'
})
]
sceneParam变量就能在vue文件中直接获取
vue中封装axio.js
首先在main.js引入对应的axio封装文件
import Vue from 'vue';
import axios from './providers/axios.js';
import api from './providers/api.js';
Vue.prototype.$axios = axios;
Vue.prototype.$api = api;
axio.js文件
// 使用数据拦截器
import axios from 'axios';
import Qs from 'qs';
import {
Message
} from 'element-ui';
axios.defaults.timeout = 5000;
// env_config
// dev 开发环境
// test 测试环境
// build 线上环境
var urlObj = {
dev: 'http://localhost:8081',
test: 'http://localhost:8081/',
build: 'https://www.17npw.net/api/'
}
console.log(urlObj[sceneParam]);
// Message('这是一条消息提示');
axios.defaults.baseURL = urlObj[sceneParam]; //填写域名
//http request 拦截器 客户端给服务端 的数据
axios.interceptors.request.use(
config => {
config.headers.common = {
'X-API-TOKEN': localStorage.getItem('token'),
'version': '1.0',
'Content-Type': 'application/json;charset=UTF-8'
}
console.log('begin');
if (config.data.form) {
//转化成formData格式
// transformRequest只能用在 PUT, POST, PATCH 这几个请求方法
config.transformRequest = [function (data) {
//方式一
delete data.form;
// var ret = '';
// for (let it in data) {
// ret += it+'=' +data[it] + '&';
// }
// return ret.substring(0,ret.length-1);
//方式二：
var test2 = Qs.stringify(data);
return test2;
}]
}
return config;
},
error => {
return Promise.reject(err);
}
);
//响应拦截器即异常处理 - -- 服务给客户端的数据进行处理
axios.interceptors.response.use(response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
// return response
}, err => {
if (err && err.response) {
var errorMsg = '';
switch (err.response.status) {
case 400:
console.log('错误请求')
errorMsg = '错误请求';
break;
case 401:
console.log('未授权，请重新登录');
errorMsg = '未授权，请重新登录';
break;
case 403:
console.log('拒绝访问')
errorMsg = '拒绝访问';
break;
case 404:
console.log('请求错误,未找到该资源')
errorMsg = '请求错误,未找到该资源';
break;
case 405:
console.log('请求方法未允许')
errorMsg = '请求方法未允许';
break;
case 408:
console.log('请求超时')
errorMsg = '请求超时';
break;
case 500:
console.log('服务器端出错')
errorMsg = '服务器端出错';
break;
case 501:
console.log('网络未实现')
errorMsg = '请求方法未允许';
break;
case 502:
console.log('网络错误')
errorMsg = '网络错误';
break;
case 503:
console.log('服务不可用')
errorMsg = '服务不可用';
break;
case 504:
console.log('网络超时')
errorMsg = '网络超时';
break;
case 505:
console.log('http版本不支持该请求')
errorMsg = 'http版本不支持该请求';
break;
default:
console.log(`连接错误${err.response.status}`)
}
Message({
message: errorMsg,
type: 'warning'
});
} else {
console.log('连接到服务器失败')
}
return Promise.resolve(err.response)
})
export default {
//post方法
// post(url,params){
// return new Promise((resolve,reject)=>{
// return axios.post(url,params)
// .then((response)=>{
// if(response.status==200){
// resolve(response.data);
// }
// })
// })
// },
// // 方式二： 包装一个 直接利用axios自身是一个Promise对象的思想封装
// post (url, params) {
// return axios.post(url,params)
// .then(response => {
// if(response.status==200){
// return Promise.resolve(response.data);
// //注意必须要有return，相当于new Promise里的resolve，告诉接口已经获取数据
// }
// })
// .catch(err => {
// reject(err)
// })
// },
// //方式三
// // 注意： axios在配置headers头的时候，会合并拦截器和函数封装里的headers的选项
// post (url, params) {
// return axios({
// method: 'post',
// url:url,
// data: params,
// headers:{
// 'X-API-TOKEN':localStorage.getItem('token'),
// 'Content-Type': isForm ? typearr['form'] : typearr['json'],
// 'test':'ppp'
// }
// }).then((response) => {
// if(response.status==200){
// return Promise.resolve(response.data)
// }
// },(e) => {
// return Promise.reject(e)
// })
// // 或者catch捕获异常
// .catch(function (error) {
// })
// },
//方式四：
async post(url, params) {
var res = await axios({
method: 'post',
url: url,
data: params
});
return res.data;
},
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data)
.then(response => {
resolve(response.data);
})
})
},
get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
})
},
}
api.js
export default {
basic:{
login:'/api/login',
info:'/api/info',
msg:'/api/msg',
hello:'/api/hello'
},
userInfo:{
}
}
在vue文件中使用
<template>
<div class="home-page">
我是新闻页面
<!-- {{infoData}} -->
<ul>
<li v-for="(item,index) in infoData" :key="index"> {{item.name}}:{{item.content}} </li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
infoData:{}
}
},
methods:{
getInfoList2(){
var res = this.$axios.post(this.$api.basic.info,{
kind:'school',
form:true
}).then((res)=>{
console.log(res);
});
},
getInfoList(){
this.$axios.post(this.$api.basic.info,{
kind:'school',
form:true
}).then((res)=>{
this.infoData = res.result;
console.log('res.tag',res.tag)
if(res.tag==1){
return this.$axios.post(this.$api.basic.msg,{
tag:res.tag,
form:false
})
}
}).then((res)=>{
console.log(res)
})
}
},
mounted(){
// this.getInfoList2();
this.getInfoList();
}
}
</script>