MyAxios.js

系统派来充数的

已于 2023-08-07 09:30:47 修改

阅读量96

点赞数

文章标签： vue.js javascript 前端

于 2023-06-02 17:04:41 首次发布

本文链接：https://blog.csdn.net/2301_76513773/article/details/131010383

版权

文章展示了如何使用axios库创建一个定制的请求模块，包括get和post方法。这个模块添加了请求拦截器来处理token，以及响应拦截器来统一处理各种业务异常，如错误提示和状态码对应的响应。同时，还包含了对不同环境URL的处理，便于在开发和生产环境之间切换。

摘要由CSDN通过智能技术生成

网络请求

MyAxios.js

// 导出一个对象，该对象拥有get与post方法用于发送相应类型的请求
import qs from 'qs';
import axios from 'axios';
const instance = axios.create();

const myaxios = {
  /**
   * 用于发送 get 请求
   * @param {string} url 请求路径
   * @param {object} params 请求参数对象  {参数名:参数值}
   */
  get(url, params) {
    return instance({
      url,
      method: 'GET',
      params
    })
  },

  /**
   * 用于发送 post 请求
   * @param {string} url 请求路径
   * @param {object} data 请求参数对象  {参数名:参数值}
   */
  post(url, data) {
    return instance({
      url,
      method: 'POST',
      data: qs.stringify(data)
    })
  }
}

export default myaxios;

myAxios.js(另一版本)

// 请求封装
// 导出一个对象，该对象拥有get与post方法用于发送相应类型的请求
import qs from 'qs';
import axios from 'axios';
import { ElNotification  } from 'element-plus';
import store from '@/store';
import router from '@/router'
import BaseUrl from '@/http/BaseUrl';

const instance = axios.create();


// 针对instance，添加请求拦截器，每个请求都带着token一起发送
instance.interceptors.request.use(config=>{
  // config对象就是请求配置数据对象
  let token = store.state.token||localStorage.getItem('Authorization')
  if(token){
    config.headers['Authorization'] = token
  }
  // if (config.method === 'get' || config.method === 'GET') {
  //   config.data = true // 这个是关键点，加入这行就可以了  解决get  请求添加不上content_type 
  // }
  return config;
})


// 针对instance处理统一的业务异常   基于响应拦截器
instance.interceptors.response.use((response)=>{
  // 调试用
  if(response.data.code!==200){
    ElNotification({
      type: 'error',
      title:'错误'+ response.data.code, 
      message:response.data.msg,
      duration: 0,
    })
  }
  // 统一异常处理 400业务状态码
  if(response.data.code==400){
    let errmsg = response.data.msg.details[0].message
    console.warn('请求参数有误，请检查:', errmsg)
    Notification({
      type: 'error',
      title:'注意', 
      message:'系统开小差了，等会试试吧！'
    })
  }else if(response.data.code==401){
    ElNotification({
      type: 'error',
      title:'注意', 
      message:response.data.msg
    })
    store.commit('updateUser', null)
    // 跳转到登录页面
    router.push('/home/index')
  }
  else if(response.data.code==1002){
    ElNotification({
      title: 'Error',
      message: '验证码错误',
      type: 'error',
    })
  }
  else if (response.data.code == 1003) {
    ElNotification({
      title: "错误",
      message: "该用户已被冻结，联系客服处理",
      type: "warning",
    });
  }
  else if (response.data.code == 1006) {
    ElNotification({
      title: "错误",
      message: "密码错误",
      type: "warning",
    });
  }
  else if (response.data.code == 1004) {
    ElNotification({
      title: "错误",
      message: "用户不存在，请先完成注册",
      type: "warning",
    });
  }
  else if (response.data.code == 1005) {
    ElNotification({
      title: "错误",
      message: "用户名密码不能为空",
      type: "warning",
    });
  }
  return response;
})

const myaxios = {
  /**
   * 用于发送 get 请求
   * @param {string} url 请求路径
   * @param {object} params 请求参数对象  {参数名:参数值}
   */
  get(urll, params) {
    return instance({
      // 自定义请求头
      headers: {'content-type': 'application/json'},
      url: BaseUrl.BMDURL+urll,
      method: 'GET',
      params
    })
  },
 
  /**
   * 用于发送 post 请求
   * @param {string} url 请求路径
   * @param {object} data 请求参数对象  {参数名:参数值}
   */
  post(urll, params) {
    return instance({
      headers: {'content-type': 'application/json'}, // 自定义请求头
      url: BaseUrl.BMDURL+urll,
      method: 'POST',
      data: params
    })
  },


  /**
   * 用于发送 get 请求
   * @param {string} url 请求路径
   * @param {object} data 请求参数对象  {参数名:参数值}
   */
  
  downLoad(urll){
    return instance({
      method: 'GET',
      url: BaseUrl.BMDURL+urll,
      params: {}, 
      responseType: 'blob'})
  },
}
 
export default myaxios;

BaseUrl.js

// 封装请求前缀，方便生产环境与开发环境的切换

const URL_ENV = {
  DEVELOPMENT: {  // 开发环境的URL
    BMDURL: 'http://localhost:3010',
    UPLOADURL: 'http://localhost:9000'

  },
  PRODUCTION: {  // 生产环境的URL
    BMDURL: 'https://web.codeboy.com/bmdapi',
    UPLOADURL: 'https://web.codeboy.com/bmduploadapi'
  }
}
export default URL_ENV.DEVELOPMENT
//  export default URL_ENV.PRODUCTION

inde.js

import ActorApi from './apis/ActorApi'
import DirectorApi from './apis/DirectorApi'
import MovieApi from './apis/MovieApi'
import CinemaApi from './apis/CinemaApi'

const httpApi = {
  ActorApi, // 演员查询接口目录
  DirectorApi, // 导演查询接口目录
  MovieApi, // 电影查询接口目录
  CinemaApi, // 影院查询接口目录
}

export default httpApi;

|-- ActorApi.js

// 演员模块接口
import myaxios from "../MyAxios";
import URLENV from '@/http/BaseUrl'

const BMDURL = URLENV.BMDURL

const ActorApi = {

  /**
   * 查询所有演员
   * @param {Object} params  参数列表：{ page: 1, pagesize: 100 }
   * @returns 
   */
  queryAllActors() {
    let url = BMDURL + "/movie-actors";
    let params = { page: 1, pagesize: 100 }
    return myaxios.get(url, params)
  },

  /**
   * 按姓名模糊查询演员信息
   * @param {Object} params  参数列表：｛name:'关键字'｝
   * @returns 
   */
  queryActorsByNameLike(params) {
    let url = BMDURL + "/movie-actors/name";
    return myaxios.post(url, params)
  },

  /**
   * 删除演员接口
   * @param {Object} params  参数列表：｛id:演员id｝
   * @returns 
   */
  delete(params) {
    let url = BMDURL + "/movie-actor/del";
    return myaxios.post(url, params)
  },

  /**
   * 新增演员接口
   * @param {Object} params
   * 参数列表：｛actorName:姓名，actorAvatar:头像路径｝
   */
  add(params) {
    let url = BMDURL + '/movie-actor/add'
    return myaxios.post(url, params)
  }

}
export default ActorApi;