Vue使用——axios封装

背景

  • 在前端Vue项目中,需要自定义axios请求拦截器。

配置

  • 建立js文件:axiosUtil.js,文件内容如下
复制代码
import axios from 'axios';
import ElementUI from 'element-ui';
const service = axios.create({
    // baseURL: 'https://www.easy-mock.com/mock/test',
    timeout: 200000
});

// 请求拦截器
service.interceptors.request.use(
    config => {
        console.log('config', config)
        // 在发送请求之前做些什么
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

//响应拦截器
service.interceptors.response.use(
    response => {
        console.log(response)
        const res = response.data
        // 200是自定义的状态码,根据实际情况定义
        if (res.statusCode !== 200) {
            Message({
                message: res.message || 'Error',
                type: 'error',
                duration: 5 * 1000
            })

            /* 此处还可以写一些其他的逻辑处理 */
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        console.log('err' + error)
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service;
复制代码
  • 封装api,使用axiosUtil.js进行接口封装(举例:farmApi.js)
复制代码
import axios from 'axios';
import base from './base.js'; import storage from '../utils/storage.js'; import axiosUtil from '../utils/axiosUtil.js';

/** * 增加农场 * @param {*} data * @returns */ function addFarm(data) { return axiosUtil({ method: 'post', url: base.mms + '/farm/save', data: data, headers: {token:storage.get('token')} }) } /** * 删除农场 * @param {*} data * @returns */ function delFarm(data) { return axiosUtil({ method: 'get', url: base.mms + '/farm/delete', params: data,     headers: {token:storage.get('token')} }) } export default{ addFarm, delFarm }
复制代码
  • 使用api,进行接口调用
复制代码
import farmApi from './farmApi.js';

farmApi.addFarm(this.farmObj).then((response) => {
    var code = response.code;
    let msg = response.msg;

    if (200 == code) {
        console.log("XXXXX");
    } else {
        console.log("XXXXX");
    }
});
复制代码

 

posted @   话·醉月  阅读(542)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示