1. 程式人生 > >react native 網路請求 axios

react native 網路請求 axios

react native的網路請求推薦使用axios和fetch 兩種方式,當前闡述的是axios

1.安裝axios

yarn add react-native-axios

2.建立一個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.token
        config.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.data if (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 = true showToast('登入失敗!',2500); } console.log(res); return res }, (error) => { showToast('出錯了!請稍後再試!',5000); return Promise.reject(error); })

注:在react native IOS版本下無toast,自己手動安裝

yarn add react-native-easy-toast