RN版本：0.64
系统：Win10
前言
记录一下React Native 如何进行网络请求,Fetch和WebSocket的基础使用可以直接到React Native官网或者React Natiive中文网查看文档。
Axios基础用法
这里分享下Axios的用法，Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
- 安装Axios库
npm: npm install axios
yarn: yarn add axios
- 新建request.js文件:
import axios from 'axios';
export const MethodType = {
GET: 'GET',
POST: 'POST',
PUT: 'PUT',
DELETE: 'DELETE',
PATCH: 'PATCH',
};
export const request = async (
api,
method = MethodType.GET,
params = {},
) => {
// 如果是get方法，则使用params参数，否则使用data
const data = method === 'GET' ? 'params' : 'data';
let headers = {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json',
};
return new Promise((resolve, reject) => {
axios({
url: api,
method,
// 这块要为了区分后台get和post的参数名
[data]: params,
headers,
})
.then((responseData) => {
resolve(responseData);
})
.catch((error) => {
reject(error)
});
});
};
- 调用:
import {request} from './requset';
const apiPrefix = 'http://yourdomain/api/v1';
export default {
addResource(data) {
return request(`${apiPrefix}/resources/add-resource`, 'POST', data);
},
getResources {
return request(`${apiPrefix}/resources/resources`, 'GET');
},
}
- Axios拦截器
- 在request.js中加入 以下代码，即可在axios请求前和接收到服务器响应时做相应的操作，比如Token验证或者统一的错误提示等
// request拦截器
axios.interceptors.request.use(
config => {
// Do something before request is sent
// 举个例子，
let token = await getToken();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config
},
error => {
// Do something with request error
console.log(error)
Promise.reject(error)
}
)
// respone拦截器
axios.interceptors.response.use(
response => {
if (response.status !== 200) {
console.log(response.data.errMsg)
} else {
return response.data
}
},
error =>
return Promise.reject(error)
}
)
