在vue项目中首先 npm 命令安装 axios: npm install axios -S
axios 的封装使用请求带上token，token通过登录获取存在vuex，为防止刷新丢失token使用持久化 vuex-persistedstate 插件保存数据
npm i -S vuex-persistedstate
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [persistedState()]
})
axios 的封装可以全局捕捉接口异常或者是断网的情况的处理，也可以优化接收到的后台数据，处理后返回至前端，首先还是在 src 文件夹下创建 api 文件夹，创建一个封装 axios 的JS文件，命名为：https.js ，然后在 main.js 文件配置全局
https.js 文件
import axios from 'axios'
import { Message } from 'view-design'; // 引入iview的消息提示组件，用于提示接口的报错等
import store from '../store/index'; // 引入vuex-store
// 创建axios实例
axios.defaults.withCredentials = true;
const httpService = axios.create({
baseURL: "", // 需自定义 // url前缀-'http:xxx.xxx'
timeout: 900000, // 需自定义 请求超时时间 十五分钟
withCredentials: false, // `withCredentials` 表示跨域请求时是否需要使用凭证
});
// request拦截器
httpService.interceptors.request.use(
config => {
if (store.state.token) {
console.log(store.state.token);
config.headers['token'] = store.state.token // 让每个请求携带自定义token 请根据实际情况自行修改
}
return config;
},
error => {
// 请求错误处理
return Promise.reject(error);
}
)
// respone拦截器
httpService.interceptors.response.use(
response => {
let msg = ""
if (response.status == 200) {
switch (response.data.code) {
case 1000:
msg = response.data.msg
// Message['success']({
// background: true,
// content: msg,
// duration: 3
// })
break;
default:
msg = response.data.msg
Message['error']({
background: true,
content: msg,
duration: 10,
closable: true
})
}
// 统一处理状态
return Promise.resolve(response.data.data)
} else {
return Promise.reject(response)
}
},
// 处理处理
error => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求';
break;
case 401:
error.message = '未授权，请重新登录';
break;
case 403:
error.message = '拒绝访问';
break;
case 404:
error.message = '请求错误,未找到该资源';
break;
case 500:
error.message = '服务器端出错';
break;
default:
error.message = `未知错误${error.response.status}`;
}
Message['error']({
background: true,
content: error.message,
duration: 10,
closable: true
})
} else {
error.message = "连接到服务器失败";
Message['error']({
background: true,
content: error.message,
duration: 10,
closable: true
})
}
return Promise.reject(error);
}
)
/*网络请求部分*/
/*
* get请求
* url:请求地址
* params:参数
* */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* delete请求
* url:请求地址
* params:参数
* */
export function del(url, params = {}) {
return new Promise((resolve, reject) => {
httpService.delete(url, {
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* delete请求体
* url:请求地址
* params:参数
* */
export function delc(url, params = {}) {
return new Promise((resolve, reject) => {
httpService.delete(url, {
data: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
/*
* post请求
* url:请求地址
* params:参数
* */
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService.post(url, params)
.then(response => {
resolve(response);
})
.catch(error => {
reject(error);
})
// httpService({
// url: url,
// method: 'post',
// data: params
// }).then(response => {
// resolve(response);
// }).catch(error => {
// reject(error);
// });
});
}
/*
* put请求
* url:请求地址
* params:参数
* */
export function put(url, params = {}) {
return new Promise((resolve, reject) => {
httpService.put(url, params)
.then(response => {
resolve(response);
})
.catch(error => {
reject(error);
})
});
}
/*
* 文件上传
* url:请求地址
* params:参数
* */
export function upload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}
export default {
get,
del,
delc,
post,
put,
upload
}
在 main.js 文件里引用 https
import http from '@/api/https.js'
Vue.prototype.$http = http
页面调用
this.$http.get(url, { custcode: "" }).then(res =>{})
this.$http.post(url, { data }).then(res =>{})
this.$http.put(url, { data }).then(res =>{})
this.$http.del(url, { id: "" }).then(res =>{})
