whalecloud-dxp-api-react-native/DXPHttpRequest.en-US.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

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 provides detailed business interface call processes, which can guide your development based on the flowcharts.
-   For interface details, see [Experience Api](https://www.digchan.info/en-US/new/experience-api)
    -   The interface details include specific input parameters, output parameters, and exception information
    -   To call an interface in the SDK: const response = DXPRequest.BusinessCategory.SpecificInterface(inputParameters)
    -   During development, some common interfaces are available: [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
Set the request URL(basePath),Initialize using the DXPRequest.initConfig method

```javascript
import { DXPRequest } from "./DXPHttpRequest";
// Create configuration object
const configuration = new Configuration({
	basePath: "https://demo.com/path", // Replace with your API base URL
});
// Initialize configuration information
DXPRequest.initConfig(configuration);
```

### Set Auth Token

DXP provides various user authentication methods. This section explains how to configure user login authentication using a username and password. For more details, please refer to [this link](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 contains information returned after login
		// response.resultMsg is a message returned by the backend upon successful login
		console.log(response.resultMsg);
		// A token is returned upon successful user login
		console.log(response.data.token);
		// User information, such as mobile
		console.log(response.data.userInfo.mobile);
		// Set the obtained token information to a global variable (this step might be omitted later)
		DXPRequest.setToken({ accessToken: "token" });
	})
	.catch((error) => {
		// Exception information obtained when login fails
		console.log(error.resultMsg);
	});
```

### Usage Example

After a successful user login, business interfaces can be called. For example, the logged-in user information interface[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 contains the query result object
		// response.resultMsg is a message returned upon successful query
		console.log(response.resultMsg);
		// Account name retrieved from the query
		console.log(response.data.acctName);
	})
	.catch((error) => {
		// Exception information obtained when the call fails
		console.log(error.resultMsg);
	});
```

### Advanced Features

#### How to Set Interceptors

Interceptors can be used to perform various operations:

-   Request Interceptor
    -   You can add request headers uniformly through a request interceptor

```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);
	}
);
```

-   Response Interceptor

```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;
	}
);
```