react native axios 封装组件
一、最近在研究react native的网络请求，然后自己封装了一个来练习
1.添加axios 和querystring依赖
yarn add axios && yarn add querystring
2.新建 src/common/httpBaseConfig.js
3.新建 src/utils/http/index.js
import axios from 'axios';
import qs from 'querystring';
import baseConfig from '../../common/httpBaseConfig.js';
axios.defaults.baseURL = baseConfig.baseUrl + baseConfig.prefix;
axios.defaults.timeout = 100000
// // axios拦截器
axios.interceptors.request.use(config => {//拦截器处理
config.headers['Authorization'] = "12233334"
config.headers['token'] = "rreebjjj"
if(config.method === 'get'){
config.params = {
...config.data,
_t: Date.parse(new Date())/1000
}
}
return config
})
axios.interceptors.response.use(response => {//请求返回数据处理
//console.log(response)
if(response.status === '200' || response.status === 200){
return response.data.data || response.data
}else{
// 非200请求抱错
throw Error(response.opt || '服务异常')
}
})
// fetch感觉略麻烦，不清爽，直接引了个axios，用es7写的。
export default class http {
static async get(url, params) {
/**
* params{
* goods：id，
* name：string
* } ==> ?goods=id&name=string
*/
try {
let query = await qs.stringify(params)
let res = null;
if (!params) {
res = await axios.get(url)
} else {
res = await axios.get(url + '?' + query)
}
return res
} catch (error) {
return error
}
}
static async post(url, params) {
try {
let res = await axios.post(url, params)
return res
} catch (error) {
return error
}
}
static async patch(url, params) {
try {
let res = await axios.patch(url, params)
return res
} catch (error) {
return error
}
}
static async put(url, params) {
try {
let res = await axios.put(url, params)
return res
} catch (error) {
return error
}
}
static async delete(url, params) {
/**
* params默认为数组
*/
try {
let res = await axios.post(url, params)
return res
} catch (error) {
return error
}
}
}
4.在页面中使用
以上是 react native axios 封装组件 的全部内容， 来源链接： utcz.com/z/383522.html
