whalecloud-dxp-api-react-native/DXPHttpRequest.md

This section explains how to use the SDK and illustrates it with an example: - This chapter is essential to learn - For specific business development, see [Bussiness Scenario](https://www.digchan.info/en-US/dxp/user-sso/sign-up) - The Business Scenario pr

# DXP API SDK

本章节介绍如何使用 SDK,并且通过一个样例进行讲解

-   本章节为必学章节
-   具体业务开发时，查看[Bussiness Scenario](https://www.digchan.info/en-US/dxp/user-sso/sign-up)
    -   Bussiness Scenario 中有具体的业务接口调用流程，可以根据流程图的指导进行业务开发工作。
-   接口详情，查看[Experience Api](https://www.digchan.info/en-US/new/experience-api)
    -   接口详情中描述了具体的接口入参信息、出参信息、异常信息
    -   接口在 SDK 中的调用方式：const 出参 = DXPRequest.业务分类.具体接口(入参)
    -   开发过程中有一些公共接口: [Common Api](https://www.digchan.info/dxpdoc.html#tag/Common-Management)

### Integration

1. Add the npm package reference to the `package.json` in your project, for example:

    ```json
    	"dependencies": {
    		"whalecloud-dxp-api-react-native": "http://npm.iwhalecloud.com:8081/whalecloud-dxp-api-react-native"
    	}
    ```

2. Run `npm install` or `yarn install` in the root directory of the project to install the new dependencies.

3. Rebuild and run your React Native project.

### Configuration

#### Modify the network request configuration object

可以配置网络请求地址信息，通过 DXPRequest.initConfig 方法进行初始化

```javascript
import { DXPRequest } from "./DXPHttpRequest";
// Create configuration object
const configuration = new Configuration({
	basePath: "https://demo.com/path", // Replace with your API base URL
});
// 初始化配置信息
DXPRequest.initConfig(configuration);
```

### Set Auth Token

DXP 提供了多种用户鉴权方式，本章节通过用户密码的方式进行介绍如何配置用户登录鉴权，更详细的请查看[地址](https://www.digchan.info/en-US/dxp/user-sso/sign-in)

```javascript
import { DXPRequest } from "./DXPHttpRequest";
const request = {
	loginAcct: "account number",
	password: "password",
};
DXPRequest.pwdLogin(request)
	.then((response) => {
		//response 登录之后返回的信息
		//response.resultMsg 登录成功之后后端返回的提示信息
		console.log(response.resultMsg);
		//用户成功登录之后，会返回一个token
		console.log(response.data.token);
		//用户的信息，例如mobile
		console.log(response.data.userInfo.mobile);
		//将获取到的token信息，设置到全局变量中（后续考虑省略这一步操作）
		DXPRequest.setToken({ accessToken: "token" });
	})
	.catch((error) => {
		//登录失败时获取到的异常信息
		console.log(error.resultMsg);
	});
```

### Business Interface Call

用户登录成功后，可以调用业务接口。以登录用户信息接口为例[Query Account Detail](https://www.digchan.info/dxpdoc.html#tag/Account-Management/paths/~1dxp~1account-management~1v1~1accounts~1%7BacctNbr%7D/get)：

```javascript
import { DXPRequest } from "./DXPHttpRequest";
const acctNbr = "12345678";
DXPRequest.AccountManagement.queryAccountDetail(acctNbr)
	.then((response) => {
		//response 查询结果对象
		//response.resultMsg 成功之后返回的提示信息
		console.log(response.resultMsg);
		//查询到的账户名称
		console.log(response.data.acctName);
	})
	.catch((error) => {
		//调用失败获取到的异常信息
		console.log(error.resultMsg);
	});
```

### Advanced Features

#### 如何设置拦截器

可以通过拦截器进行比较多的操作

-   请求拦截器
    -   可以通过请求拦截器，统一添加请求头信息

```javascript
import { DXPRequest } from "./DXPHttpRequest";
DXPRequest.interceptors.request.use(
	(config) => {
		// Add dynamic properties to request headers before sending the request
		config.headers = {
			...config.headers,
			language: "English",
		};
		return config;
	},
	(error) => {
		// Do something with request error
		return Promise.reject(error);
	}
);
```

-   返回拦截器

```javascript
import { DXPRequest } from "./DXPHttpRequest";
// Add response interceptors
DXPRequest.interceptors.response.use(
	(response) => {
		// Do something with response data
		return response;
	},
	(error) => {
		// Do something with response error
		console.log(error);
		return error;
	}
);
```