axios请求封装

最新推荐文章于 2025-12-02 15:33:22 发布

原创最新推荐文章于 2025-12-02 15:33:22 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#npm #前端 #node.js #vue #javascript

该博客介绍了如何使用npm安装axios库，并在JavaScript中配置axios的基础设置，包括设置超时时间、保持会话一致性和基础URL。同时，它展示了如何设置响应拦截器处理401和402错误状态码。此外，还详细封装了get、post（包括普通、JSON和多媒体格式）等HTTP请求方法，用于处理不同类型的API调用。

1.npm安装axios

npm install axios

2.建立axios.js文件配置axios

import axios from 'axios';

axios.defaults.timeout = 12000; //请求超时时间
axios.defaults.withCredentials = true; //保持会话session一致
axios.defaults.baseURL= 'http://xxxxx'; // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。


/**
*    响应拦截，是否允许游客模式
**/
axios.interceptors.response.use(response => {
    //当状态码是401或者402时，且不允许游客模式
    if (response.data.code == 401 || response.data.code == 402) {
        //此处执行某些操作;
    }
    return response;
}, error => {
    //有时后台也可能把没有登录放在请求失败里面
    if (error.response.status == 401 || error.response.status == 402) {
        //此处执行某些操作
    } else {
        //当请求失败时执行的操作，比如
        Toast(`服务器连接失败，${error}`);
    }
})


export default axios;

3.再创建requestMethods.js封装请求如get、post等方法的文件

import axios from './axios';  //刚刚配置过的aixos
const qs = require('qs'); //qs.stringify()将对象序列化成url形式

//去除空参数的方法
let filterEmptyObj = obj => {
    for (let key in obj) {
        obj[key] === '' ? delete obj[key] : obj[key];
    }
    return obj;
}

1.封装get请求
export let get = (url, p) => {
    axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset = UTF-8';
    axios.defaults.headers['Authorization'] = 'xxx'; //此处添加token(根据是否需要)
    return new Promise((reslove, reject) => {
        return axios.get(url, {params: filterEmptyObj(p)}).then(response => {
            if (response && response.data) {
                resolve(response.data);
            } 
        }).catch(error => {
            reject(error);
        })
    })
}

2.封装普通post请求
export let postCommon = (url, p) => {
    axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset = UTF-8';
    axios.defaults.headers['Authorization'] = 'xxx';//此处添加token(根据是否需要)
    return new Promise((resolve, reject) => {
        return axios.post(url, qs.stringify(filterEmptyObj(p))).then(response => {
            resolve(response.data);
        }).catch(error => {
            reject(error);
        })
    })
}

3.封装post请求，接收JSON格式
export let postJSON = (url, p) => {
    axios.defaults.headers['Content-Type'] = 'application/josn; charset = utf-8';
    axios.defaults.headers['Authorization'] = 'xxx';
    return new Promise((resolve, reject) => {
        return axios.post(url, filterEmptyObj(p)).then(response => {
            resolve(response.data);
        }).catch(error => {
            reject(error);
        })
    })
}

4.封装post请求，接收Multimedia（媒体）格式
export let postMu = (url, p) => {
    axios.defaults.headers['Content-Type'] = 'multipart/form-data';
    axios.defaults.headers['Authorization'] = 'xxx';
    return new Promise((resolve, reject) => {
        return axios.post(url, filterEmptyObj(p)).then(response => {
            resolve(response.data);
        }).catch(error => {
            reject(error);
        })
    })
}