数据请求

优质

小牛编辑

128浏览

2023-12-01

本文介绍如何在 Rax 中创建网络请求。大多数前端应用都需要通过 HTTP 协议或 MTOP 协议与后端服务器通讯，例如你可能需要给某个接口发起 POST 请求以提交用户数据，或者可能需要从某个服务器上获取一些静态内容。

HTTP 请求

request 模块已支持多端发送请求，要发起简单的 GET 请求的话，只需简单地将网址作为 url 参数即可。

import request from 'universal-request';
request({
  url: 'https://alibaba.github.io/rax/hello.json'
});

request 还有可选参数，支持配置请求参数，如 header 参数，或指定使用 POST 方法等。

import request from 'universal-request';
request({
  url: 'https://alibaba.github.io/rax/',
  method: 'POST',
  data: {
    from: 'Rax',
  },
  dataType: 'json'
}).then(response => {})
  .catch(error => {});

可以参考 request 文档来查看所有可用的参数。

错误处理

有很多因素会导致请求失败，如服务器错误、请求错误、接口返回格式错误等。这时我们需要通过 catch 给予用户正确反馈。error 错误对象会返回错误码 code 及错误说明 message。

MTOP 请求

Rax 通过 @ali/universal-mtop 支持 MTOP 请求：

Web 环境：使用 lib-mtop 进行 MTOP 请求, 请在必要的时候引入 polyfill （详情可参考lib-mtop的说明）。

Weex 环境：优先调用 aliweex 的 MTOP 模块，调用失败后会再次尝试调用 windvane 的 MtopWVPlugin.send 方法进行 MTOP 请求。因此，使用 MTOP 时请确认已经引入 lib-mtop , 并在必要的时候引入 polyfill。

小程序环境：使用 my.sendMtop 方法调用，注意需要先申请开通 JSAPI 权限。

使用

import MTOP from '@ali/universal-mtop';

MTOP.request({
    // 通用参数
    api: 'com.taobao.detail.getTaobaoDyn', // 必须
    v: '1.0',  // 必须
    data: { 'itemNumId': 37194529489 }, // 必须
    ecode: 0,   // 必须
    type: 'GET',   // 非必须。请求类型（GET/POST），默认是GET
    dataType: 'jsonp', // 非必须。数据类型，默认jsonp
    timeout: 20000 // 非必须。接口超时设置，默认为20000ms
}, successCallback, failureCallback);

配置

配置 MTOP 请求域：

import MTOP from '@ali/universal-mtop';

MTOP.config(confKey, confValue);

例：

MTOP.config(prefix, 'api');             // mtop的前缀
MTOP.config(subDomain, 'm');            // mtop的子域
MTOP.config(mainDomain, 'taobao.com');   // mtop的主域

注：

关于 MTOP 以及 MTOP 接口相关的参数说明可以查阅：lib-mtop

universal-mtop 相关参数定义与 lib-mtop 完全一致。

MTOP 接口相关的管理和测试可以在 http://127.0.0.1/max.m.taobao.com/mtop/myapi