RN版本：0.64
系統(tǒng)：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,
// 這塊要為了區(qū)分后臺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驗證或者統(tǒng)一的錯誤提示等
// 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)
}
)
