关于前端:React-Native使用axios进行网络请求

在前端开发中，可能实现数据申请的形式有很多，如Ajax、jQuery ajax、axios和fetch等。不过，随着技术的倒退，当初可能看到的基本上也就axios和fetch两种。

axios是一个基于Promise的Http网络库，可运行在浏览器端和Node.js中，Vue利用的网络申请根本都是应用它实现的。axios有很多优良的个性，如反对申请的拦挡和响应、勾销申请、JSON主动转换、客户端进攻XSRF等。

应用axios之前，须要先在我的项目中装置axios插件，装置命令如下。

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

作为一款优良的网络申请库，axios反对根本的GET、POST、DELET和PUT等申请。比方，应用axios进行GET申请时就能够应用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进行网络申请会产生大量的冗余代码，所以在理论开发过程中，还须要对axios申请进行一些封装，以不便前期的应用，如下所示。

const request = axios.create({  transformResponse: [    function (data) {      return data;    },  ],});const defaultOptions = {                    //解决默认配置  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 => {        …. //解决返回后果      });    });  }}export const bizStream = new Bizstream();

通过封装解决后，进行网络申请的时候就不便了许多，并且对于一些通用的返回后果咱们也在网络层进行了解决。理论应用时，开发者只须要依照要求传入须要的参数，而后再通过异步函数解决返回的后果即可，如下所示。

//GET申请const hotMovie='';const data = await apiRequest.get(hotMovie);//POST申请let baseUrl = '';let param = {   pageNumber: 0,   cityCd: 31, };const data = await apiRequest.post(baseUrl, param);