OpenAPI Explorer:Use Alibaba Cloud API Toolkit in VS Code

Prerequisites

VS Code is installed.

Method 1: Install from the Extensions view

1. In the VS Code Activity Bar, click the icon.

2. Search for Alibaba Cloud API Toolkit and click Install.

Method 2: Install from VS Code Marketplace

1. Visit the Alibaba Cloud API Toolkit page in VS Code Marketplace and click Install. VS Code opens with the extension page.

2. Click Install on the extension page in VS Code.

Verify the installation

After installation, the Alibaba Cloud icon appears in the Activity Bar.

In the Extensions view in the VS Code sidebar, search for Alibaba Cloud API Toolkit. The main panel shows the extension name, the version (v0.0.9), the publisher (Alibaba Cloud OpenAPI), and a blue Uninstall button. This indicates that the extension is installed.

Subscribe to services

Subscribe to Alibaba Cloud services and select API versions. The extension recommends versions and requires no configuration file. Press Ctrl+Cmd+K (Ctrl+Win+K in Windows) to search and subscribe.

In the API service drop-down list, use the search box to filter and select the target service. For example, select Certificate Management Service (service code cas, recommended version 2020-04-07).

API search

Search subscribed APIs and view their references. Press Ctrl+Cmd+L (Ctrl+Win+L in Windows) to search APIs or insert code snippets.

After you enter a keyword such as describe in the search box, the matching API operations appear below the box. Each entry shows the request method, the operation name, a brief description, and the version path.

API reference preview

Click an API operation to view its reference in a new tab, including usage notes, request parameters, response parameters, and error codes.

In API Toolkit, the left pane shows the API navigation tree, where you can browse API operations by service and category. After you select an operation, such as RebootInstances — Restarts one or more instances, the main pane on the right shows the reference for that operation, including the description and the request parameters. Use the tabs at the top to switch between Document, Debug, and Code Sample.

API debugging

• Debug API operations after credential verification.

• Configure parameters and view debugging results.

• View API responses directly in VS Code.

For example, select the DescribeRegions operation. In the parameter form, set Endpoint to China (Hangzhou), InstanceChargeType to PrePaid, ResourceType to instance, and AcceptLanguage to zh-CN. After you click Debug, the right pane shows a successful response with HTTP status code 200 in JSON format that contains the list of available regions.

Use sample code

Complete and run the code

• Complete the code

  • Modify the endpoint.

    Log on to OpenAPI Explorer, hover over Cloud Products and select a service. View the supported endpoints on the Regions tab.

  • Specify request parameters. For more information, see the API reference preview section of this topic.

  • Optional. Add logging.

  • Save the code.

    import OpenApi, * as $OpenApi from '@alicloud/openapi-client';
    import Ecs20140526, * as $Ecs20140526 from '@alicloud/ecs20140526';
    export default class DescribeRegion {
        static async main(args: string[]): Promise<void> {
            let config = new $OpenApi.Config({
                // Make sure that the ALIBABA_CLOUD_ACCESS_KEY_ID and ALIBABA_CLOUD_ACCESS_KEY_SECRET environment variables are configured in the code runtime environment. 
                accessKeyId: process.env['ALIBABA_CLOUD_ACCESS_KEY_ID'],
                accessKeySecret: process.env['ALIBABA_CLOUD_ACCESS_KEY_SECRET'],
                // Specify an endpoint. For more information, see endpoints at https://api.alibabacloud.com/product/Ecs.
                endpoint: `ecs.cn-hangzhou.aliyuncs.com`,
            });
            let client = new Ecs20140526(config);
            let describeRegionsRequest = new $Ecs20140526.DescribeRegionsRequest({});
            let response = await client.describeRegions(describeRegionsRequest);
            console.log(response.body?.regions?.region);
        }
    }

• Run the code

  1. Compile the TypeScript file into JavaScript:

     tsc client.ts # client.ts is the file name.

  2. Create a main.js file with the following code:

     const { default: Describeregion } = require("./describeregion");
     
     Describeregion.main();
     

  3. Run the sample code:

     node .\main.js

  4. If the following result is returned, the call is successful.

     PS D:\ide\tooldemo> tsc describeregion.ts
     PS D:\ide\tooldemo> node .\main.js
     [
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Qingdao)',
         regionEndpoint: 'ecs.cn-qingdao.aliyuncs.com',
         regionId: 'cn-qingdao'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Beijing)',
         regionEndpoint: 'ecs.cn-beijing.aliyuncs.com',
         regionId: 'cn-beijing'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Zhangjiakou)',
         regionEndpoint: 'ecs.cn-zhangjiakou.aliyuncs.com',
         regionId: 'cn-zhangjiakou'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Hohhot)',
         regionEndpoint: 'ecs.cn-huhehaote.aliyuncs.com',
         regionId: 'cn-huhehaote'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Ulanqab)',
         regionEndpoint: 'ecs.cn-wulanchabu.aliyuncs.com',
         regionId: 'cn-wulanchabu'
       },
       DescribeRegionsResponseBodyRegionsRegion {
         localName: 'China (Hangzhou)',
         ...
       }
     ]