React Native如何使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求

本篇內(nèi)容主要講解“React Native如何使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“React Native如何使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求”吧!

在前端開(kāi)發(fā)中，能夠完成數(shù)據(jù)請(qǐng)求的方式有很多，如Ajax、jQuery ajax、axios和fetch等。不過(guò)，隨著技術(shù)的發(fā)展，現(xiàn)在能夠看到的基本上也就axios和fetch兩種。

axios是一個(gè)基于Promise的Http網(wǎng)絡(luò)庫(kù)，可運(yùn)行在瀏覽器端和Node.js中，Vue應(yīng)用的網(wǎng)絡(luò)請(qǐng)求基本都是使用它完成的。axios有很多優(yōu)秀的特性，如支持請(qǐng)求的攔截和響應(yīng)、取消請(qǐng)求、JSON自動(dòng)轉(zhuǎn)換、客戶端防御XSRF等。

使用axios之前，需要先在項(xiàng)目中安裝axios插件，安裝命令如下。

//npm 
npm install axios --save
//yarn
yarn add react-native-axios

作為一款優(yōu)秀的網(wǎng)絡(luò)請(qǐng)求庫(kù)，axios支持基本的GET、POST、DELET和PUT等請(qǐng)求。比如，使用axios進(jìn)行GET請(qǐng)求時(shí)就可以使用axios.get()方法和使用axios(config { … })兩種方式，如下所示。

axios.get('/getData', {
    params: { 
      id: 123
    }
  }).then(function (response) {
    console.log(response);
  })

axios({
  method: 'GET',
  url: '/getData',
  params: {
    id: 123,
  }
}).then(function (response) {
    console.log(response);
});

可以看到，如果直接使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求會(huì)產(chǎn)生大量的冗余代碼，所以在實(shí)際開(kāi)發(fā)過(guò)程中，還需要對(duì)axios請(qǐng)求進(jìn)行一些封裝，以方便后期的使用，如下所示。

可以看到，如果直接使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求會(huì)產(chǎn)生大量的冗余代碼，所以在實(shí)際開(kāi)發(fā)過(guò)程中，還需要對(duì)axios請(qǐng)求進(jìn)行一些封裝，以方便后期的使用，如下所示。

const request = axios.create({
  transformResponse: [
    function (data) {
      return data;
    },
  ],
});

const defaultOptions = {                    //處理默認(rèn)配置
  url: '',
  userAgent: 'BIZSTREAM Library',
  authentication: {
    integration: {
      access_token: undefined,
    },
  },
};

class Bizstream {
  init(options) {
    this.configuration = {...defaultOptions, ...options};
    this.base_url = this.configuration.url;
    this.root_path = '';
  }

  post(path, params, data, type = ADMIN_TYPE) {
    return this.send(path, 'POST', params, data, type);
  }

  get(path, params, data, type = ADMIN_TYPE) {
    return this.send(path, 'GET', params, data, type);
  }

  send(path, method, params, data, type, headersOption) {
    const url = `${this.base_url}${this.root_path}${path}`;
    const headers = {
      'User-Agent': this.configuration.userAgent,
      'Content-Type': 'application/json',
      ...headersOption,
    };

    return new Promise((resolve, reject) => {
      request({url, method, headers, params, data}).then(response => {
        …. //處理返回結(jié)果
      });
    });
  }
}

export const bizStream = new Bizstream();

經(jīng)過(guò)封裝處理后，進(jìn)行網(wǎng)絡(luò)請(qǐng)求的時(shí)候就方便了許多，并且對(duì)于一些通用的返回結(jié)果我們也在網(wǎng)絡(luò)層進(jìn)行了處理。實(shí)際使用時(shí)，開(kāi)發(fā)者只需要按照要求傳入需要的參數(shù)，然后再通過(guò)異步函數(shù)處理返回的結(jié)果即可，如下所示。

//GET請(qǐng)求
const hotMovie='';
const data = await apiRequest.get(hotMovie);
//POST請(qǐng)求
let baseUrl = '';
let param = {
   pageNumber: 0,
   cityCd: 31,
 };
const data = await apiRequest.post(baseUrl, param);

到此，相信大家對(duì)“React Native如何使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！