vue中封装axios，添加请求拦截器，响应拦截器
首先在vue项目中src文件夹下新建request文件夹，关于接口封装文件都放在request文件夹中。
然后在request文件夹中创建index.js,url.js,api.js三个js文件。
url.js文件主要放置项目中api请求域名和打包的域名（包括测试环境，预生产环境，生产环境）
const VUE_APP_MODE = process.env.VUE_APP_MODE;let baseURL;if (VUE_APP_MODE == 'development') { // 本地baseURL = 'http://127.0.0.1:8888';//测试地址} else {// pre 预生产// prod 生产switch (VUE_APP_MODE) {case 'test':// 测试baseURL = '/api';break;case 'pre':// 预生产baseURL = '';break;case 'prod':// 生产baseURL = '';break;default:// 测试baseURL = '';break;}}module.exports = {baseURL};
index.js文件主要对axios封装，添加请求拦截器和响应拦截器
/*** 请求封装*/import axios from 'axios';import configUrl from './url.js';import store from '../store';const service = axios.create({baseURL: configUrl.baseURL,// withCredentials: true, // 当跨域请求时发送cookietimeout: 15000 // 请求超时});//添加请求拦截器 请求接口统一添加tokenservice.interceptors.request.use(config =>{config.headers.token = store.getters.token || ''; //请求添加tokenreturn config;},error =>{return Promise.reject(error);})// 响应拦截器service.interceptors.response.use(response => {//如果接口返回token，替换本地旧tokenif (response.headers.token) {sessionStorage.setItem("token", response.headers.token);}//自定义设置后台返回code对应的响应方式if (response.data.code == 203) { // 未登录或登录超时return Promise.reject(new Error('登录超时'));} else { //接口正常，返回数据return response;}},error => {if (error.message) {// this.$massage.error('服务器开小差了，请稍后再试!') //错误响应alert('服务器开小差了，请稍后再试!') }return Promise.reject(error);});//暴露出封装过的服务export default service;
api.js文件主要放置项目中的接口 （post和get两种参数不同，注意区别data和params）
//引入上边封装的axios文件import request from "@/request";// import QS from "qs"; //获取用户信息 post请求export const getUserInfo = data => {return request({url: "/user/info",method: "POST",headers:{"content-type": "application/json;charset=UTF-8"},data});};//下载用户上传模板 get请求export const downLoadTemplate = params=> {return request({url: "/user/info/template",method: "GET",headers:{"content-type": "application/json;charset=UTF-8"},params});};
以上就是axios的封装方法，请求拦截器和响应拦截器的添加方法。
api的使用方法：
<template><div></div></template><script>import { getUserInfo } from '@/request/api'export default {name:'',components: {},data() {return { }},methods: {getUserInfo(data={}){//获取用户信息const loading = this.$loading() //请求响应开始，打开loadingconst params = { //参数phone:this.phone,password:this.password,}getUserInfo(params).then(res=>{if(res.data.code===200){// 请求成功callback}else{// 请求失败callbackthis.$messageError.call(this,res.data.msg)}loading.close() //请求响应结束，关闭loading}).catch(()=>{loading.close() //请求响应结束，关闭loading})},}}</script><style lang='scss' scoped></style>
如果感觉以上代码有用，请点个赞，谢谢！
