react 封装axios请求拦截、响应拦截、封装post、get请求

5 篇文章 0 订阅
3 篇文章 0 订阅

默认你已经创建好了一个react项目
首先我们需要下载axios,我存储用户信息是用react-cookie,你们可以选择使用本地存储

npm i axios --save
npm i react-cookie --save

然后在src目录下创建一个utils文件夹用于存放公用js,
继续utils目录下创建http.js文件。
另一个标记的index.js则是下面会说到的入口文件
在这里插入图片描述

打开http.js文件,我们得开始干正事了
如果你已经下载好了axios和cookie则需要引入,其中axios是必须的cookie不是

import axios from "axios";
import cookie from 'react-cookies'

//这是使用代理的路径,如果你想了解的话可以看我之前的文章或者~~问我
let baseUrl = '/api'

// 创建axios实例,在这里可以设置请求的默认配置
const instance = axios.create({
    timeout: 10000, // 设置超时时间10s,如果10秒没有返回结果则中断请求,认为连接超时
    baseURL: baseUrl // 根据自己配置的代理去设置不同环境的baseUrl
})

// 文档中的统一设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/json';

// 如果你是上传文件的话需要设置为
// instance.defaults.headers.post['Content-Type'] = 'multipart/form-data';

开始请求拦截部分
请求拦截就是在你的请求还没有发送之前,你可以对你的请求做一些修改

/** 添加请求拦截器 **/
instance.interceptors.request.use(config => {
    var token = cookie.load('token')//获取你登录时存储的token
	// 判断cookie有没有存储token,有的话加入到请求头里
    if (token) {
        config.headers['token'] = token//在请求头中加入token
    }
	// 如果还需要在请求头内添加其他内容可以自己添加 "[]" 内为自定义的字段名 "=" 后的内容为字段名对应的内容
    // config.headers['自定义键'] = '自定义内容'
	// 如果此时觉得某些参数不合理,你可以删除它,删除后将不会发送给服务器
	// delete config.data.userName 
	// userName是你传递的参数名,或许你可以试着在控制台输出config看看它包含了什么
	
	// 对应可以删除也可以在此添加一些参数
	// config.data.userName = '天道酬勤'
    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('请求超时, 请刷新重试')
    }
})

你添加了请求拦截器,则须使用自定义的请求,否则拦截器将没有意义
一般我都是封装两个请求,一个post、一个get就足够了

/* 统一封装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)
        })
    })
}

这里已经将封装好的请求方式抛出了,需要在入口文件里引用,设置为全局变量,你也可以在需要的地方按需引入,但我不太建议
入口文件是src目录下的index.js文件,如果不清楚的话上面图片有做标记

import React, { Component } from 'react';
import { get, post } from './utils/http';

Component.prototype.get = get;
Component.prototype.post = post;

使用的话


let data = {
	userName: 'admin',
	password: '123456'
}

// post请求实例
this.post("url",data).then(res=>{
	// 这里是成功回调
	console.log(res)
}).catch(err=>{
	// 这里是错误回调
	console.log(err)
})

// get请求实例
this.get("url",data).then(res=>{
	// 这里是成功回调
	console.log(res)
}).catch(err=>{
	// 这里是错误回调
	console.log(err)
})

感谢你看到这里,完整代码奉上


import axios from "axios";
import cookie from 'react-cookies'

let baseUrl = '/api'

// 创建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 = cookie.load('token')//获取本地存储的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)
        })
    })
}

如果帮到你的话请点赞收藏加关注

  • 13
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值