从React Native,Flutter到小程序(七)网络

SpringHeather

已于 2023-05-04 10:37:29 修改

阅读量173

点赞数

分类专栏：前端文章标签： react native flutter 小程序

于 2023-05-04 10:34:31 首次发布

本文链接：https://blog.csdn.net/u010247622/article/details/130450243

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

React Native

fetch

使用 fetch 发送网络请求的例子：

javascript
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((json) => console.log(json))
  .catch((error) => console.error(error));

以上代码表示向指定 URL https://jsonplaceholder.typicode.com/posts 发送一条 POST 请求，并上传了一个 JSON 数据。其中，请求头部声明了请求和响应的数据类型；请求主体部分使用 JSON.stringify() 方法将 JavaScript 对象转换成字符串格式。

fetch 函数返回一个 Promise 对象，因此需要通过调用 then() 方法来获取远程服务器返回的响应内容，并进行处理；若发生错误，则通过 catch() 方法捕获异常并进行处理。在上述代码中，我们通过链式调用 then() 方法，首先将响应结果解析成 JSON 格式并输出到控制台。当然你也可以根据自己的需求进行相应的操作，例如将其保存至本地或渲染到页面上。

总之，React Native 内置的 fetch 模块使用简单、灵活，并且支持异步函数。对于基础的 HTTP 请求操作，它是一种非常不错的选择。

Axios

import axios from 'axios';

// 创建 Axios 实例
const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

// 请求拦截器
api.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些事情，比如添加 token
    console.log('Request URL: ', config.url);
    return config;
  },
  (error) => {
    // 处理请求错误
    console.error('Error Occurred:', error);
    return Promise.reject(error);
  },
);

// 响应拦截器
api.interceptors.response.use(
  (response) => {
    // 在收到响应后做一些事情，比如解析数据
    console.log('Response Status Code: ', response.status);
    console.log('Response Data: ', response.data);
    return response;
  },
  (error) => {
    // 处理响应错误
    console.error('Error Occurred:', error);
    return Promise.reject(error);
  },
);

// 发送网络请求
api.get('/posts').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.error(error);
});

这个例子中，我们首先通过 axios.create() 方法创建了一个 Axios 实例，并设置了请求基础路径。

接着，我们添加了两个拦截器：请求拦截器和响应拦截器，它们会在每个请求和响应时被调用。在请求拦截器中可以进行一些添加 token、解密数据等业务逻辑处理；而在响应拦截器中，则可以进行一些数据校验、解析数据等后续操作。

最后，我们使用创建好的 Axios 实例来发送网络请求，并通过 .then() 和 .catch() 处理异步操作成功和失败的情况。

因此，使用 Axios 拦截器可以让我们更加方便和灵活地处理请求和响应的异常情况，从而更加高效地实现业务需求。

这里我们借助了 Axios 库进行了简单的 GET 和 POST 请求。首先通过 import 语句将 Axios 引入到项目中，并通过 axios.defaults.baseURL 指定了基础 URL 地址，方便后续请求时统一管理接口。

接着，使用 axios.get 发送 GET 请求，其中 /comments 是具体的API路径（以上例子是从JSonPlaceholder服务器上获取JSON数据）；在成功的回调函数中直接输出响应数据中的 data 字段即可。

最后，使用 axios.post 发送 POST 请求，同样也可以在出错时通过 err 类型捕获异常，并在对应的错误处理回调函数中打印出错误原因和具体信息。

除此之外，Axios 还提供其他许多丰富和灵活的功能，如自定义请求头、拦截器、超时设置以及取消请求等。这些功能可以根据实际情况进行针对性操作，以满足开发需求。

Flutter

HttpClient

下面是一个完整的使用 HttpClient 发送 GET 请求并处理响应结果的例子：

import 'dart:async';
import 'dart:convert';
import 'dart:io';

Future<void> main() async {
  final client = new HttpClient();

  try {
    final request =
        await client.getUrl(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    final response = await request.close();

    if (response.statusCode == HttpStatus.ok) {
      final body = await response.transform(utf8.decoder).join();
      final data = json.decode(body);

      print(data);
    } else {
      print('Error - ${response.statusCode}');
    }
  } catch (e) {
    print('Error - $e');
  } finally {
    client.close();
  }
}

上述代码调用了 Dart 语言自带的 HttpClinet 对象，首先使用 client.getUrl() 方法创建了一个 GET 请求，并等待请求发送，然后利用 await 关键字等待获取请求的响应并处理。

如果响应状态码为200（即请求成功），则首先通过 response.transform(utf8.decoder).join() 将响应中的数据读取到一个字符串中，接着将其解析为 JSON 格式，最后再打印出来。如果响应状态码不为200，则打印出错误信息。

可以看到，HttpClient 需要做很多的事情，需要编写一些结果的方法来读取响应内容、处理返回等操作。所以，建议在实际开发中使用更切合高级开发者的一些更简洁的库来完成网络请求需求。比如 DIO， http 等第三方库。这些库在HttpClient 的基础上做了很多的优化和封装，使开发者的工作更为高效、轻松。

http库

lutter 提供了第三方库 http 来处理 HTTP 请求和响应。相比于低级的 HttpClient 类，使用 http 库可以更轻松地完成网络请求，并且代码量也更少。

下面是一个完整的使用 http 发送 GET 请求并处理响应结果的例子：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> main() async {
  final url = 'https://jsonplaceholder.typicode.com/posts';
  final response = await http.get(Uri.parse(url));
  
  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    
    print(data);
  } else {
    print('Error - ${response.statusCode}');
  }
}

首先通过 import ‘package:http/http.dart’ as http; 引入了 http 包，并在主函数中创建了一个 URL 字符串。然后发送了 GET 请求，并等待响应的到来。最后通过 http.Response 的 statusCode 属性判断请求是否成功，并通过 response.Body 获取响应文本数据，接着将其解析为 JSON 格式，最终打印出来。

正如所见，http 库提供了一种简单、快速的方式来处理 HTTP 请求和响应操作，并且这个过程只需要较少的代码量。当然，它还有很多实用的功能，比如 POST 请求、设置请求头、设置代理、基础认证等等。但是由于篇幅原因，在此就不一一列举了。如果您想了解更多，可以访问 http 包的官方文档。

DIO

Dio 是一个强大、灵活且易于使用的 HTTP 客户端库。它支持多种请求方式，如 GET、POST 等，并能够无缝地处理文件上传和下载等操作，具有编写简洁高效的代码并快速开发完整应用程序的能力。

Dio 可以帮助我们更加轻松地进行网络请求，而不需要关注复杂的底层细节，也为错误处理提供了统一、简单的接口设计。此外，Dio 还提供了很多其他功能，如：设置请求头、表单提交、文件上传、拦截器等，这些功能能够进一步提高开发效率和代码可读性。

import 'package:dio/dio.dart';

void main() {
  final dio = Dio();

  // 添加请求拦截器
  dio.interceptors.add(InterceptorsWrapper(
    onRequest: (RequestOptions options, RequestInterceptorHandler handler) async {
      // 在请求发送之前做一些事情
      print('Request URL: ${options.path}');
      return handler.next(options); // 继续发送请求
    },
    onResponse: (Response response, ResponseInterceptorHandler handler) async {
      // 在收到响应后做一些事情
      print('Response StatusCode: ${response.statusCode}');
      return handler.next(response); // 继续处理响应
    },
    onError: (DioError e, ErrorInterceptorHandler handler) async {
      // 在请求或响应发生错误时做一些事情
      print('Error Occurred：${e.message}');
      return handler.next(e); // 继续处理错误
    },
  ));

  // 发送网络请求并等待响应的到来
  dio.get('https://jsonplaceholder.typicode.com/posts').then((response) {
    print(response.data);
  }).catchError((error) {
    print(error);
  });
}

这个例子中，我们首先创建了一个 Dio 实例，并添加了一个 InterceptorWrapper 的请求拦截器，在每次请求前、响应后和异常处理时会输出相应事件的日志信息。

接着，我们再发送一个 GET 请求并等待响应。一旦收到响应，就会输出响应的数据；如果发生错误，则会输出相关的错误信息。

所以，使用 Dio 拦截器可以方便地处理各种 HTTP 请求和响应报文，并在其中添加自定义逻辑，实现更加灵活的业务需求。

微信小程序

wx.request()

微信小程序提供了一个请求拦截器和一个响应拦截器，可以通过 wx.request() 方法的 header 参数来设置。下面是一个完整的示例：

javascript
// 自定义日志拦截器
const loggerInterceptor = (chain) => {
const requestParams = chain.requestParams;

console.log('Request URL: ', requestParams.url);

const startTime = new Date().getTime();

return chain.proceed(requestParams).then((res) => {

const endTime = new Date().getTime();
console.log('Response Time:', endTime - startTime, 'ms');
console.log('Response Data:', res.data);

return res;

}).catch((err) => {
console.error(err);
return Promise.reject(err);
});
};

// 添加日志拦截器
wx.request({
url: ‘https://jsonplaceholder.typicode.com/posts’,
method: ‘GET’,
header: {
‘content-type’: ‘application/json’ // 请求头必须设置为 application/json
},
success (res) {
console.log(res.data);
},
fail (err) {
console.error(err);
}
});

// 添加拦截器链
const interceptor = wx.request.intercept(interceptorId, loggerInterceptor);

// 移除拦截器链
wx.request.unIntercept(interceptorId);
在这个例子中，我们首先定义了一个请求日志拦截器 loggerInterceptor ，它会在每次请求发送之前记录请求 URL 以及响应时间和数据，并且支持异步 Promise 处理。接着，我们使用 wx.request() 方法发送了两个 GET 请求，并都添加了相应的请求头参数。

然后，我们通过 wx.request.intercept() 把拦截器连入第二个请求中，从而对该请求进行一些自定义处理。最后，我们又通过 wx.request.unIntercept() 方法把拦截器链关联取消掉，从而重置请求拦截状态。

因此，在微信小程序中使用请求拦截器和响应拦截器可以获得更高的灵活性和可配置性，实现更加高效、稳定和安全的业务逻辑编写。