react native 网络请求 axios
生活随笔
收集整理的這篇文章主要介紹了
react native 网络请求 axios
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
react native的網絡請求推薦使用axios和fetch 兩種方式,當前闡述的是axios
1.安裝axios
yarn add react-native-axios2.創建一個js,進行基本的配置
let instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}withCredentials:true });
baseURL:設置相對應的baseURL來傳遞URL
timeout:設置超時
withCredentials: 允許cookie
Headers:設置頭部信息
method:設置請求方式(常見的有get,post,put,patch,delect)
responseType:設置接受的類型
?
3.攔截器
instance.interceptors.request.use(function (config) {const secretKey = getSecretKey()if (secretKey) { // 登錄之后 store.getters.tokenconfig.headers['secret-key'] = secretKey} else {config.headers['action-key'] = getExternalKey()}return config }, function (error) {return Promise.reject(error); }); let alert = false; // 響應 instance.interceptors.response.use(response => {// 根據狀態碼做相應的事情const res = response.dataif (res.code === 1 && res.showMsg === true) { // 成功showToast(res.message,1500);}if (res.code === -2 && res.showMsg === true) { // 錯誤showToast(res.message,3000);}if (res.code === 2) { // 警告showToast(res.message,3000);}if (res.code === 1003) { // 權限不足 的情況showToast('賬號權限不足!',2500);}if (res.code === 1004 && !alert) { // 獲取不到用戶信息 或 登錄錯誤alert = trueshowToast('登錄失敗!',2500);}console.log(res);return res }, (error) => {showToast('出錯了!請稍后再試!',5000);return Promise.reject(error); })注:在react native IOS版本下無toast,自己手動安裝
yarn add react-native-easy-toast?
轉載于:https://www.cnblogs.com/xx929/p/10174607.html
總結
以上是生活随笔為你收集整理的react native 网络请求 axios的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 模拟赛 yjqb
- 下一篇: HCNA之网络基础【以太网帧结构】