vue项目中使用axios时的请求拦截和封装
1、在src下创建目录utils,在utils下新建文件request.js
//request.js
import axios from 'axios';
import { Message,Loading } from 'element-ui';
const service = axios.create({
baseURL:process.env.BASE_API,
timeout:10000
})
let loadingInstance;
let options = { //loading 的配置参数
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
}
//请求拦截器
service.interceptors.request.use(function(config){
loadingInstance = Loading.service(options);//显示loading
config.data = config.data; //根据后端数据格式,可做相应的数据转换 JSON.stringify() 或 qs.stringify()
//设置header的配置信息,跟后端配合设置
// config.headers = {
// 'Content-Type':'application/x-www-form-urlencoded'
// }
//设置 token ,根据需要设置
// const token = getCookie('token');
// if(token){
// config.params = {'token':token};
// config.headers.token = token;
// }
return config;
},function(error){
loadingInstance.close(); //关闭loading
return Promise.reject(error)
})
//响应拦截器
service.interceptors.response.use(function(response){
loadingInstance.close(); //关闭loading
return response;
},function(error){
loadingInstance.close(); //关闭loading
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 = '请求错误,未找到该资源';
window.location.href = '/notFound';
break;
case 405:
error.message = '请求方法未允许';
break;
case 408:
error.message = '请求超时';
break;
case 500:
error.message = '服务器端出错';
break;
case 501:
error.message = '网络未实现';
break;
case 502:
error.message = '网络错误';
break;
case 503:
error.message = '服务不可用';
break;
case 504:
error.message = '网络超时';
break;
case 505:
error.message = 'http版本不支持该请求';
break;
default:
error.message = `连接错误${error.response.status}`
}
}else{
if(JSON.stringify(error).includes('timeout')){
Message.error('服务器响应超时,请刷新当前页')
}
error.message('连接服务器失败')
}
Message.error(error.message)
return Promise.resolve(error.response)
})
export default service
2、在 utils 目录下新建文件 http.js
//http.js
import request from './request';
const http = {
get(url,params){
const config = {
method:'get',
url:url
}
if(params) config.params = params;
return request(config)
},
post(url,params){
const config = {
method:'post',
url:url
}
if(params) config.data = params
return request(config)
},
put(url,params){
const config = {
method:'put',
url:url
}
if(params) config.params = params;
return request(config)
},
delete(url,params){
const config = {
method:'delete',
url:url
}
if(params) config.params = params;
return request(config)
}
}
export default http
3、在 src 目录下新建一个api 目录,并在api目录下新建文件 api.js
// api.js
import http from '../utils/http';
let resquest = ''; //http://10.0.0.3:8080/getList.json //请求本地文件
let postUrl ="/postURL/info/supplement"; // http://10.0.0.3:8080/postURL/info/supplement //跨域--代理请求
//get 请求
export function getListAPI(params){
return http.get(`${resquest}/getList.json`,params)
}
//post 请求
export function postFormAPI(params){
return http.post(`${postUrl}`,params)
}
//put 请求
export function putSomeAPI(params){
return http.put(`${resquest}/putSome.json`,params)
}
//delete 请求
export function deleteListAPI(params){
return http.delete(`${resquest}/deleteList.json`,params)
}
4、引入并使用api请求接口
<script>
import {getListAPI,postFormAPI, putSomeAPI, deleteListAPI} from '@/api/api' //引入api
export default{
data(){
return{
}
},
methods:{
getList(){
//模拟的数据
let data = {
name:'lisi'
}
getListAPI(data).then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
},
postForm(){
//模拟的数据
let data = {
username:"",
telnum:"",
}
postFormAPI(data).then(res =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
}
}
}
</script>
5、跨域代理设置—在当前项目下,新建一个 vue.config.js 文件,内容如下:
const webpack = require('webpack');
module.exports = {
assetsDir: './',
publicPath: '/',
outputDir: './dist',
runtimeCompiler: undefined,
productionSourceMap: false,
filenameHashing: false,
parallel: undefined,
css: {
extract: false
},
devServer: {
overlay: { // 让浏览器 overlay 同时显示警告和错误
warnings: true,
errors: true
},
host: "10.0.0.3",
port: 8080, // 端口号
https: false, // https:{type:Boolean}
open: false, //配置后自动启动浏览器
hotOnly: true, // 热更新
// proxy: 'http://localhost:8080' // 配置跨域处理,只有一个代理
proxy: { //配置多个代理
"postURL": {
target: "http://218.17.135.100:8089",
changeOrigin: true,
//ws: true,//websocket支持
secure: false,
pathRewrite: {
"^/postURL": "/"
}
}
}
}
}
原文地址:https://www.cnblogs.com/zyfenblog/p/13865169.html