【Vue】axios请求拦截器+封装统一接口管理

1.安装axios

npm install --save axios

 

 

2.创建请求拦截器 request.js

配置请求拦截器，可以在请求发送前进行统一预处理请求，

不用每次在请求的时候手动添加协议头 token 等配置

 

// axios二次封装

import router from "@/router";
import axios  from "axios";


// axios.create方法创建实例
const requests = axios.create({
    // 配置基础路径
    baseURL:"http://localhost:80/api",
    //请求超时时间
    timeout:5000,
    

});

// 请求拦截器
requests.interceptors.request.use(config => {
    //如token就自动每次在请求头加上，这样就不用自己写请求头
    let token  = sessionStorage.getItem("token")
    if (token) {
        config.headers.Authorization = sessionStorage.getItem("token")
    }


    return config;
})


// 响应拦截器
requests.interceptors.response.use(res =>{
    // res = 响应后的返回数据

    //如果无权限或者没登录，清除token,并跳转到登录界面
    if (res.data.code == 401 || res.data.code == 402) {
        localStorage.removeItem("token")
        this.router.push("/login")
        // Location.reload()
    }


     return res.data;
},(error)=>{
    // 响应时候后的回调
    return Promise.reject(new Error("faile"))
}

)


export default requests;

 

 

3.创建统一管理Api接口 index.js

// api统一管理

import requests from './request';


//获取用户信息   这种是带param参数请求的，写入对应参数就行，如果有多个参数，用对象{}的方式传
export const getUser =data=>requests({url:'/getinfo',method:'get',params:{email:data}});


//登录  这种是请求json body方式发送参数，直接放进去对象就行
export const Login =data=>requests({url:'/login',method:'post',data});

// 上传文件，如果有请求头需要可以自己加上，文件数据可以放在data传过去
export const sendpp = (data) => requests({
    url:'/chat/sendPicture',
    method:"post",
    data:data,
    headers:{
        "Content-type": "multipart/form-data",
        "Authorization": localStorage.getItem("token")
    }
})

 

如果有很多个接口，可以提前写在该文件，用的时候只需要写名称即可，例如上面的获取用户信息的接口

调用方式;

先引入，然后直接把定义接口的接口名字打出去即可。

import {Login} from '@/api';

//定义一个方法，并在方法前面使用async  
async login() {
      let r = await Login(this.loginForm);//因为是多个参数的json方式传参，所以直接传对象即可。

      if (r.code == 200) {
        localStorage.setItem("token", r.data);//登陆后保存token在本地

        this.$message.success("登录成功");//输出成功信息

      } else {
        this.$message.error(r.data);
      }
    }