whalecloud-dxp-api-react-native/example.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, call [Query Account Detail](https://www.digchan.info/dxpdoc.html#tag/Account-Management/paths/~1dxp~1account-management~1v1~1accounts~1%7BacctNbr%7D/get) to get account details.

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