vue接口封装

最新推荐文章于 2024-04-10 02:15:11 发布

波塞冬次打次

最新推荐文章于 2024-04-10 02:15:11 发布

阅读量599

点赞数

分类专栏：笔记文章标签： http javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44683763/article/details/122322232

版权

笔记专栏收录该内容

88 篇文章

订阅专栏

该博客介绍了如何使用 Axios 进行请求和响应的拦截处理，包括请求标记避免重复请求，以及针对不同错误状态的响应处理。此外，还展示了如何封装 Axios 实例，提供 get、post、put 和 delete 等常用 HTTP 请求方法，并添加了身份验证信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios封装

请求拦截：请求标记已经存在，则取消本次请求，否则在请求列表中加入请求标记
响应拦截：code==500，统一报错；不同error，不同处理报错

//  axios.js
import axios from "axios"
import { Message } from 'gdb-ui';

let requestList = [];
let cancelToken = axios.CancelToken;

// 请求拦截
axios.interceptors.request.use(
  (config) => {
    config.cancelToken = new cancelToken((cancel) => {
      let requestFlag = JSON.stringify(config.url) + JSON.stringify(config.data) + '&' + config.method;
      //请求标记已经存在，则取消本次请求，否则在请求列表中加入请求标记
      if (requestList.includes(requestFlag)) {
          //取消本次请求
          cancel();
      } else {
          requestList.push(requestFlag);
      }
    });
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截
axios.interceptors.response.use(
  (response) => {
    let requestFlag = JSON.stringify(response.config.url) + JSON.stringify(response.config.data) + '&' + response.config.method;
    requestList.splice(requestList.findIndex(item => item === requestFlag), 1);

    if (response.data.code === 500) {
      // dialog.message({
      //   text: response.data.msg,
      // })
      Message({
        message: response.data.msg,
        type: 'error',
        showClose: true
      })
    }
    return response
  },
  (error) => {
    requestList.length = 0;
    // 请求失败
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          // 对400错误您的处理\
          break
        case 401:
          if (error.response.config.isTarget) location.href = "/login.html"
          break
        case 404:
          Promise.reject(error)
          break
        default:
          // 如果以上都不是的处理
          return Promise.reject(error)
      }
    }
  }
)

http

封装请求方式

import axios from 'axios';
import { getCookie } from '@/assets/js/utils/cookie';
// import cookieKey from '@/assets/js/config/cookie-key';

var zuulToken = "Z2RiOnp1dWw6MTIzNDU2";
var token = getCookie('pangu_token');

export default {
    /**
     * get 请求
     * @param url 接口路由
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise<any>}
     * （Your back-end user authenticates information ）
     *      ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
     *  后端用户验证信息比如（token）   
     */
    get({ url, data = {}, isTarget = true, responseType }) {
        return axios.get(url, { headers: { Authorization: token, ZuulToken: zuulToken }, params: data, isTarget: isTarget, responseType });
    },

    /**
     * post 请求
     *
     * @param url 接口路由
     * @param data 接口参数
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise<any>}
     * 
     */
    post({ url, data, responseType }) {
        return axios.post(url, data, { headers: { Authorization: token, ZuulToken: zuulToken }, responseType });
    },

    /**
     * put请求
     * @param url 接口路由
     * @param data 接口参数
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise<any>}
     */
    put({ url, data }) {
        return axios.put(url, data, { headers: { Authorization: token, ZuulToken: zuulToken } });
    },

    /**
     * 删除
     * @param url 接口路由
     * @param auth 是否需要带登录信息
     * @returns {AxiosPromise}
     */
    del({ url }) {
        return axios.delete(url, { headers: { Authorization: token, ZuulToken: zuulToken } });
    },

    /**
     * 上传文件
     * @param url 接口路由
     * @param file 接口文件
     * @param auth 是否需要带登录信息
     */
    uploader({ url, file }) {
        let param = new FormData();
        param.append('file', file)
        return axios.post(url, param, { headers: { Authorization: 'Your back-end user authenticates information' } })
    }
};

api

接口

export default {
  // 账号登录
  login: "/api/user_service/user/login",
  // 短信验证码登录
  loginvCode: "/api/user_service/user/login_vCode",
  // 发送短信验证码
  sendLoginCode: "/api/user_service/sms/login_code",
  // 生成验证码图片 1：注册 2：登录 3：忘记密码
  getVerify: "/api/user_service/verify/getVerify/",
  // 获取商品详情
  getGoods: "/api/goods_service/goods/detail/"
}