react项目简单二次封装axios(满足项目开发)

4 篇文章 0 订阅

1、cnpm i axios -S
2、直接上代码(根据项目配置,自行更改代码)

import axios from 'axios';
import { notification } from 'antd';
import $$ from 'cmn-utils';
// 创建axios实例
const headers = (function(){
    let token = $$.getStore("token")
    return token ? { Auth: token } : {}
})()
const service = axios.create({
    baseURL: '',
    timeout: 15000, // 请求超时时间
    headers
})
const codeMessage = {
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队(异步任务)。',
    204: '删除数据成功。',
    400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限(令牌、用户名、密码错误)。',
    403: '用户得到授权,但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除,且不会再得到的。',
    422: '当创建一个对象时,发生一个验证错误。',
    500: '服务器发生错误,请检查服务器。',
    502: '网关错误。',
    503: '服务不可用,服务器暂时过载或维护。',
    504: '网关超时。',
};

service.interceptors.response.use(
    function (response) {
        //请求正常则返回
        if (response.status === 200) {
            return Promise.resolve(response.data)
        } else if (response.status === 403) {
            // 未登录或者登陆失效
            return Promise.resolve(response.data)
        }
        notification.error({
            message: response.status,
            description: response.statusText,
        });
    },
    function (error) {
        // 请求错误则向store commit这个状态变化
        const httpError = {
            hasError: true,
            status: error.response.status,
            statusText: error.response.statusText,
            info: codeMessage[error.response.status] || ""
        }
        notification.error({
            message: httpError.status,
            description: httpError.statusText,
            info: codeMessage[error.response.status] || ""
        });
        return Promise.reject(error)
    }
)

export default service
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React项目中进行二次封装axios可以提高代码的复用性和可维护性。下面是一个简单的示例来说明如何进行react二次封装axios: 1. 首先,在你的项目文件中导入axios库。你可以使用以下命令安装axios库: ```javascript import axios from 'axios'; ``` 2. 创建一个封装axios请求的文件,例如`Http.js`。在这个文件中,你可以定义一些全局的请求配置,例如设置请求头、设置请求超时时间等。同时,你还可以定义一些通用的请求方法,例如GET、POST等请求方法,并对这些方法进行二次封装。这样可以在其他地方直接使用封装后的方法进行请求。以下是一个示例: ```javascript import axios from 'axios'; const Http = axios.create({ baseURL: 'http://api.example.com', // 设置基本的请求地址 timeout: 5000, // 设置请求超时时间 headers: { 'Content-Type': 'application/json', // 设置请求头 }, }); // 封装GET请求方法 export const get = (url, params) => { return Http.get(url, { params }); }; // 封装POST请求方法 export const post = (url, data) => { return Http.post(url, data); }; export default Http; ``` 3. 在实际使用中,你可以在需要发送请求的地方引入封装好的方法,并进行请求操作。以下是一个示例: ```javascript import Http from '@/axios'; import { call } from 'redux-saga/effects'; export function* asyncCheckLogin({payload}) { const res = yield call(Http.reqCheckLogin, payload.values); if(res && res.code === '0'){ // 跳转到首页 payload.history.replace('/'); }else { message.warn("你错了"); } } ``` 通过上述步骤,你可以在React项目中进行二次封装axios,提高代码的复用性和可维护性。你可以在封装的文件中设置全局的请求配置,并定义通用的请求方法,然后在其他地方引入并使用这些方法来发送请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值