react实现axios 的简单封装

类似vue的封装模式:创建https.js

复制代码
import axios from "axios";

let baseUrl = 'http://47.94.4.201/'

// 创建axios实例,在这里可以设置请求的默认配置
const instance = axios.create({
    timeout: 20000, // 设置超时时间10s
    baseURL: baseUrl // 根据自己配置的反向代理去设置不同环境的baseUrl
})
// 文档中的统一设置post请求头。下面会说到post请求的几种'Content-Type'
instance.defaults.headers.post['Content-Type'] = 'application/json'

// /** 添加请求拦截器 **/
// instance.interceptors.request.use(config => {
//     var token = 'eiiiiasdfasdfasdfasdf'//获取本地存储的token
// 	// 判断cookie有没有存储token,有的话加入到请求头里
//     if (token) {
//         config.headers['token'] = token//在请求头中加入token
//     }
// 	// 如果还需要在请求头内添加其他内容可以自己添加 [] 内为自定义的字段名 = 后的内容为字段名对应的内容
//     // config.headers['api'] = api
//     return config
// }, error => {
//     // 对请求错误做些什么
//     return Promise.reject(error)
// })

/** 添加响应拦截器  **/
instance.interceptors.response.use(response => {
    if (response.statusText === 'OK') {
        return Promise.resolve(response.data)
    } else {
        return Promise.reject(response.data.msg)
    }
}, error => {
	// 请求报错的回调可以和后端协调返回什么状态码,在此根据对应状态码进行对应处理
    if (error.response) {
		// 如401我就让用户返回登录页
        if (error.response.status === 401) {
            this.props.history.push('/login');
        }
        return Promise.reject(error)
    } else {
        return Promise.reject('请求超时, 请刷新重试')
    }
})

/* 统一封装get请求 */
export const get = (url, params, config = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            method: 'get',
            url,
            params,
            ...config
        }).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
}

/* 统一封装post请求  */
export const post = (url, data, config = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            method: 'post',
            url,
            data,
            ...config
        }).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
}

2:使用后:

复制代码
import {get} from '../utils/https'
    
      get("/index.php/index/index/getcode").then(res=>{
            console.log(res,22);
        })
相关推荐
前端小趴菜0526 分钟前
React - createPortal
前端·vue.js·react.js
晓13131 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴2 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7893 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼3 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
爱编程的喵4 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js
阳火锅4 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊4 小时前
react中为啥使用剪头函数
前端·javascript·react.js
多啦C梦a5 小时前
【适合小白篇】什么是 SPA?前端路由到底在路由个啥?我来给你聊透!
前端·javascript·架构
薛定谔的算法5 小时前
《长安的荔枝·事件流版》——一颗荔枝引发的“冒泡惨案”
前端·javascript·编程语言