vue网络请求拦截

vue请求拦截器

1.新建文件夹interface,新建文件axios.js

import axios from 'axios'
import router from '../router'


export function request(config) {
    // 1.创建axios的实例
    const instance = axios.create({
        baseURL: '网络前缀',
        //设置请求超时时间
        timeout: 5000
    })

    // 2.1.请求拦截的作用
    instance.interceptors.request.use(config => {
        return config
    }, err => {
        console.log('请求拦截err: ' + err);
    })

    // 2.2.响应拦截
    instance.interceptors.response.use(res => {
        return res.data
    }, err => {
        console.log('响应拦截err: ' + err.response.status);
        if (err.response.status == 401) {
        可以做返回网络401的判断
        }
    })

    // 3.发送真正的网络请求
    return instance(config)
}

2.同文件夹下新建api.js

// 导入封装好的Axios
import {request} from './axios' //注意request.js的相对路径问题

//1. get请求---获取首页的多个数据
export function xxxx(paramsm,url) {
  return request({
    url,//地址，调用时传参
    method:'get',
    headers: {
        "Content-Type": "multipart/form-data",
        "X-Access-Token": localStorage.getItem("token"),
      },
    // 可以带参数也可以不带参数
    params:paramsm
  })
}
// 2.1 post请求---传输json数据时，获取多个数据
// export function ddd() {
//   return request({
//     url:"/xxx/xx",
//      headers: {
//       'Content-Type': 'application/json'
//     },
//     method:'post',
//     data: {
//         userName: 'xxx',
//         password: '123456'
//      }
//   })
// }

//2.2 post请求---传输文件流,表单Form Data 数据时
// export function zzz() {
//   return request({
//     url:'/zz/zz',
//     headers: {
//     'Content-Type': 'multipart/form-data'
//     },
//     method:'post',
//     data: {
//         userName: 'zzz',
//         password: '123456'
//      }
//   })
// }

3.在使用的页面

import { xxxx} from "../../interface/api"; //导入js，路径自己根据文件位置设置


methods:{
InterfaceFun2(carNum) {
      let params = {
        time: "2022-10-23",
        carNum:carNum
    };
    let url = "接口地址";
    // 在方法中调用函数即可
    getHomeMultidata(params, url)
      .then((res) => {
        console.log("接口返回值",res.result);
      })
      .catch((err) => {
        console.log(err);
      });
    },
    }