vue对axios进行请求响应封装

一、原因

像是在一些业务逻辑上，比如需要在请求之前展示loading效果，或者在登录的时候判断身份信息（token）等信息有没有过期，再者根据服务器响应回来的code码进行相应的提示信息。等等在请求之前，之后做的一些逻辑，都可以通过二次封装axios请求，进行实现。

二、具体的封装

这里是对axios封装的一种形式，有多种形式，具体要根据具体业务需求去定。具体代码里面有具体注释。不再啰嗦，直接上具体代码吧，供参考！

javascript 复制代码

// axios的封装
import axios, { HttpStatusCode } from "axios";
import { useRouter } from "vue-router";

// 生产环境
const baseURLProd = "https://mall.quanrui.cc/api/v1/backend/";
// 测试环境
const baseURLDev = "http://139.9.197.13:8088/api/v1/backend/";
const baseURL = baseURLDev;   //更改baseurl

// 使用路由
const router = useRouter();

// 设置请求头
axios.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded;charset=UTF-8";

// 创建axios示实例
let instance = axios.create({
  baseURL: baseURL,   //设置baseurl
  timeout: 5000, //超时时间
});

// 跳转到登录页面,如果没有登录,或者登录信息过期的话
// 携带当前页面路由，以期在登录页面完成登录后返回当前页面
const toLogin = () => {
  router.replace({
    path: "/login",
    query: {
      redirect: router.currentRoute.fullPath,
    },
  });
};

// 提示信息,Toast这个是第三方组件,根据使用的UI组件库不同进行更换
const tip = msg => {    
	Toast({        
		message: msg,        
		duration: 1000,        
		forbidClick: true    
	});
}

// 请求拦截器
// (主要是在请求的时候携带请求token,以协助后端进行判断身份信息是否过期等),或者还可以在此增加业务操作,比如请求之前展示loading效果,具体可以拿个第三方UI库的一个效果过来使用
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = store.state.token;
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {
    return Promise.error(error);
  }
);

// 响应拦截器(主要对code进行判断,提示用户进行操作)
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 服务器状态码不是200的情况
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          tip("未登录，请先登录");
          setTimeout(()=> {
            toLogin();
          },1000)
          break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面
        case 403:
          tip("登录过期，请重新登录");
          // 清除token
          localStorage.removeItem("token"); //如果存在了浏览器的localStorage
          // store.commit("loginSuccess", null);    //如果存在store里的登录状态，获取其它相关信息
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
          setTimeout(() => {
            toLogin();
          }, 1000);
          break;
        // 404请求不存在
        case 404:
          tip("网络请求不存在");
          break;
        // 其他错误，直接抛出错误提示
        default:
          tip(error.response.data.message);
          break;
      }
      return Promise.reject(error.response);
    }
  }
);

//get方法
export function get(url, params){    
	return new Promise((resolve, reject) =>{        
		axios.get(url, {            
			params: params        
		})        
		.then(res => {            
			resolve(res.data);        
		})        
		.catch(err => {            
			reject(err.data)        
		})    
	});
}

//post方法
export function post(url, params) {    
	return new Promise((resolve, reject) => {         
		axios.post(url, JSON.stringify(params))        
		.then(res => {            
			resolve(res.data);        
		})        
		.catch(err => {            
			reject(err.data)        
		})    
	});
}

// put方法
export function put(url, params){    
	return new Promise((resolve, reject) =>{        
		axios.put(url, {            
			params: params        
		})        
		.then(res => {            
			resolve(res.data);        
		})        
		.catch(err => {            
			reject(err.data)        
		})    
	});
}

// delete方法
export function del(url, params){    
	return new Promise((resolve, reject) =>{        
		axios.delete(url, {            
			params: params        
		})        
		.then(res => {            
			resolve(res.data);        
		})        
		.catch(err => {            
			reject(err.data)        
		})    
	});
}

// 导出实例
export default instance;

三、对请求统一管理

创建一个文件夹用于存放接口的请求，到时候用起来，只需要导出请求的方法就行，统一管理。不然全堆在页面上，一大串代码有点难看！

先从我们封装好的axios里面导出具体的请求方法

以下示例：

四、页面上使用

先导出请求接口的具体方法

javascript 复制代码

import { pwlogin } from "../api/login";

使用：

javascript 复制代码

getloginres() {
    pwlogin(data)
    .then((res) => {
      //数据处理
    })
    .catch((err) => console.log(err));
  }

以上就是全部，错误欢迎提出！