react-native 請求封裝


這里是用 基於ES6  promise 的 axios 插件 ,當然需要先下載此插件

npm install axios

1,首先在跟目錄創建 http 文件夾 並在里邊創建 index.js 代碼如下:

import React, { Component } from 'react';
import axios from 'axios'

let token = '';

var instance = axios.create({
    baseURL: 'https://baidu.com',
    timeout: 5000,
    headers: {'X-Custom-Header': 'foobar'},
     // `transformResponse` allows changes to the response data to be made before
    // it is passed to then/catch
    transformResponse: [function (data) {
        /**
         * 通過返回的data,來統一處理異常
         */
        return data;
        // Alter defaults after instance has been created 處理token
        instance.defaults.headers.common['Authorization'] = token;    
    }],
});

export default instance;

2 , 封裝及攔截器的使用:

import React, { Component } from 'react';
import axios from 'axios'

let token = '';

var instance = axios.create({
    baseURL: 'https://www.baidu.com',
    timeout: 5000,
    headers: {
        'X-Custom-Header': 'foobar',
        'Authorization': ''
    },
});

//添加請求攔截器
instance.interceptors.request.use(
    config => {
        if (instance.Authorization != '') {  // 判斷是否存在token,如果存在的話,則每個http header都加上token
            config.headers.Authorization = '';
        }
        return config;
    },
    err => {
        return Promise.reject(err);
});

export default instance;

 

3,在需要使用 使用請求的頁面方法如下:

import axios from '../http'   //引入上邊的index文件
  // this.props.navigation.navigate('Page4',params);  具體請求方法
        axios.get('/api/cms/eleser/homePage')
            .then(res => {
                console.log(res);
            }), err => {
                console.log(`${err}`)
            }

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com