vue中axios请求封装

最新推荐文章于 2024-09-15 17:32:54 发布

唐十八_wei

最新推荐文章于 2024-09-15 17:32:54 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/shibaweijin/article/details/118107099

版权

本文详细介绍了如何在Vue项目中使用axios进行接口请求的配置，包括请求拦截、响应拦截和token管理，以及如何通过common.js和service.js模块实现接口的复用和统一处理。还列举了项目中常用的接口路径和登录组件的示例。

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

目录结构
|-- request
| |-- common.js // 统一处理项目中所有接口的传参处理
| |-- service.js //负责和后台打交道，统一处理所有接口（各种拦截处理、状态处理等）

首先第一个service.js 配置

负责和后台打交道，统一处理所有接口（各种拦截处理、状态处理等）

import axios from 'axios'
import vue from '../main.js'
// 从本地获取token
function getTokenByLocal() {
    let token = sessionStorage.getItem('token');
    return token;
}

const service = axios.create({
    baseURL: '/api',
    // withCredentials: true,
    timeout: 5000,
})


// 请求拦截
service.interceptors.request.use(
    config => {
        if (getTokenByLocal()) {
            // 在此可以设置所有接口headers头部
            config.headers['token'] = getTokenByLocal();
        }else{
            // window.location.href="/login";
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// 响应拦截
service.interceptors.response.use(
    response => {
        let res = response.data;
        // console.log(res);
        // 状态码处理
        if (res.code == '200') {
            // location.href = "home/login";
        }
        // 如果为 -101 代表用户未登录
        if(res.code == '-101'){
            vue.$router.push('/login');
        }   
        return Promise.resolve(res);
    },
    error => {
        return Promise.reject(error)
    }
)

export default service;

其次，common.js 配置

统一处理项目中所有接口的传参处理

// 将service.js引入进来
import service from './service.js'

// post请求 80% 耦合度低 复用性高
export function requestOfPost(url, data){
    return service.post(url, data);
}

最后除了这两个配置文件还可以加入一个项目中所使用的所有接口路径
比如这样

const url = {
    // 登录
    login: '/login',
    // 登出
    outlogin: '/outlogin' 
}
export  default url;

最后在页面中使用

import { postRequest } from "../../request/api.js";
import url from "../../request/url.js";
export default {
  name: "login",
  data() {
    return {
      userName: "",
      password: "",
    };
  },
  methods: {
  	// 登录方法
   async loginFn() {
      if (!this.userName) {
        alert( "请输入账号名");
        return;
      } else if (!this.password) {
        alert("请输入密码");
        return;
      } else {
        let data = {
          userName: this.userName,
          passWord: this.password
        };
        try {
            const result = await postRequest(url.login, data)
        if(result.token){
           await sessionStorage.setItem("token", res.token); 
             // 页面跳转
             this.$router.push("/home");
        }else{
            throw new Error(result.messages[0].message);
        }
        } catch (error) {
            console.log(error);
        }
        }}
    },
  created() {
  },
};