首页 / IOS / React进行axios二次封装
React进行axios二次封装
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了React进行axios二次封装,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2506字,纯文字阅读大概需要4分钟。
内容图文
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。在实际的项目中,我们一般会进行二次封装。
1.引用及准备
封装之前首先进行引用及构造请求地址API。其中services模块汇总了所有请求地址与类型,请求示例如reqCheckLogin所示。
/**
* services模块根据接口文档定义接口的名称和方法
* 根据模块拆分文件
* index.js为出口文件,需要引入其他的services并整合
*/
import login from './login'
import permission from './permission'
import menu from './menu'
import user from './user'
const API = Object.assign(
{},
login,
permission,
menu,
user,
)
export default API
2.二次封装
首先创建axios示例,然后遍历services中的请求进行参数检查,根据参数判断请求的合法性,返回不同的信息。
// services 循环遍历输出不同的请求方法
let baseURL = '/url'
let instance = axios.create({
baseURL: baseURL,
timeout: 10000,
})
const Http = {} // 包裹请求方法的容器
// 请求格式/参数的统一
for (let key in services) {
let api = services[key]; // url method
// async方法,同步方式写异步代码
Http[key] = async function (
params, // 请求参数 get|delete:url,put|post|patch:data
isFormData = false, // 标识是否为form-data请求
config = {}, // 配置参数
splicedParam,//URL拼接参数
) {
// await axios.get('url')
let {url, method} = api
// 用于处理form-data的参数
let newParams = {}
// content-type是否为form-data的判断
if (params && isFormData) {
newParams = new FormData()
for (let key in params) {
newParams.append(key, params[key])
}
} else {
newParams = params
}
// 不同请求的判断
let response = {} // 请求的返回值
if (method === 'put' || method === 'post' || method === 'patch') {
try {
response = await instance[method](url, newParams, config)
} catch (err) {
message.error("请求错误,请重试")
}
} else if (method === 'get' || method === 'delete') {
if (splicedParam) {
url = url + '/' + splicedParam
}
config.params = newParams
try {
response = await instance[method](url, config)
} catch (err) {
message.error("请求错误,请重试")
}
}
if (response.status === 200) {
const res = response.data
if (res.code === 0) {
return res
} else {
message.error(res.message)
return false
}
}
if (response.status === 404) {
this.props.history.push('/page404')
}
if (response.status === 403) {
this.props.history.push('/page403')
}
if (response.status === 500) {
this.props.history.push('/page500')
}
}
}
3.使用??????
??????实际使用中调用封装好的方法进行请求。
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二次封装全部内容,希望文章能够帮你解决React进行axios二次封装所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。