封装请求接口的方法有很多种，这是我最近新学的一种方法，可以参考一下
如果大家有更方便的方法也可以分享出来借鉴一下哈
首先创建一个server.js文件
引入axios和qs
//引入axios和qs插件
import axios from 'axios'
import qs from 'qs'
//创建一个类并导出
export const Server= new class {
constructor() {
//请求接口路径
this.loginApi= '/api/user/getuserinfo'; //根据dapp 地址，返回对应的中心化用户信息
}
//post请求方法
//方法(参数){
// return axios.请求类型(请求接口路径, 参数).then((res) => res.data)
//}
//data为json格式，qs.stringify(data)为fromData表单格式
login(data) {
return axios.post(this.loginApi, qs.stringify(data)).then((res) => res.data)
}
//post请求方法
getuserinfo(params) {
return axios.get(this.getuserinfoApi, params).then((res) => res.data)
}
}
在页面使用
import {
Server} from "@/server";
export default {
data() {
return {
form:{
}
};
},
methods: {
Login(){
//Server.请求方法(参数对象).then(res=>{})
Server.login(this.form).then(res=>{
conlose.log(res)
})
},
getuserinfo(){
Server.getuserinfo(this.form).then(res=>{
conlose.log(res)
})
}
}
创建interceptor.js对请求进行相应的拦截处理
import Vue from 'vue'
import axios from 'axios'
import router from './router'
import {
Toast } from 'element-ui'
// 创建 axios 实例
const service = axios.create({
baseURL: config.context, // api base_url
timeout: 60000 // 请求超时时间
})
//请求前
service.interceptors.request.use(
//发送请求时即进行拦截，session为null的情况下不发送请求
function (config) {
//设置请求头
// Vue.ss.get('token') 获取存储于session中的token
config.headers['Content-Token'] = Vue.ss.get('token') ? Vue.ss.get('token') : "";
return config;
},
function (error) {
return Promise.reject("请求出错");
}
);
/*拦截器,对于响应的拦截器*/
service.interceptors.response.use(
function (response) {
let code = response.errno;
return response;
//登录状态token过期或者未登录
if (parseInt(code) === 401 || parseInt(code) === 202) {
//session无效
Toast(response.data.msg);
//跳转到登录页面
setTimeout(() => {
router.push({
name: 'login'
})
}, 1000);
Promise.reject(response);
} else if (parseInt(code) === 201) {
Toast(response.data.msg);
router.push({
name: 'Login'
})
Promise.reject(response);
}
},
function (error) {
if (error.response) {
switch (error.response.status) {
//404，网络错误，地址有问题。
case 404:
Toast("访问地址错误");
break;
case 401:
Toast("未登录或登录已失效");
setTimeout(() => {
router.push({
name: 'login'
})
}, 1000);
break;
}
} else {
let errorMsg = error.message;
if (error.message.indexOf("timeout") > -1) {
errorMsg = "请求超时";
}
return Promise.resolve({
//在报错的时候传回一个正常的promise对象，错误可以交到正常处理
data: {
code: 1,
msg: error.message,
extmsg: errorMsg
}
});
}
}
);
还有可能会出现的跨域问题
创建vue.config.js配置
module.exports = {
devServer: {
port: 8085, // 自定义端口号
// host: '192.168.101.18',
host: '0.0.0.0',
proxy: {
'/api':{
target: '要代理的域名地址', //
ws: true, // websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
// '^/api': ''
}
}
}
},
publicPath: './',
// 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: config => {
// 配置别名
config.resolve.alias
.set('@', resolve('src'))
.set('_assets', resolve('src/assets'))
.set('_components', resolve('src/components'))
.set('_views', resolve('src/views'))
config.optimization.minimizer('terser').tap((args) => {
// 去除生产环境console
args[0].terserOptions.compress.drop_console = true
return args
})