markdown 挑战04：承诺

Posted 2021-05-06

For this challenge, you'll update both the client and the server to use promises.

On the client, you will change the API methods to return promises instead accepting callbacks. Then update the `api.METHOD()` calls to use promises.

On the server, you will update `simDb` to use promises, we'll provide the code. Then update the queries to use promises instead of callbacks.

## Requirements

* Update the server-side code
  * Update the `simDb.js` file with "promisified" version
  * Update the DB queries to use promises

* Update the client-side code
  * Update `api.js` methods to return a promise from `$.ajax`
  * Update client-side api calls to use promises

## Update the Server

### Getting Started

To get started, you need to update the `simDB` to use promises. Copy the [Promisified simDB code](https://gist.github.com/cklanac/f9c80fd1d5f55f5e96ea24bee7dd041f#file-simdb-promisified-js) to your `/db/simDB.js`. The new version uses Node's `promisify` utility to use promises instead of callbacks. Don't worry about the details, yet. We'll cover creating promises in a future challenge

### Update `notes.METHOD()` to use promises

Your first challenge to is to convert the `notes.METHOD` queries from callbacks to promises. We'll help you get started by stepping thru the `notes.find` so you can update the others on your own. Below is an example of the callback-style function followed by the promise-style equivalent.

Callback Style

```js
  notes.find(id, (err, item) => {
    if (err) {
      return next(err);
    }
    if (item) {
      res.json(item);
    } else {
      next();
    }
  });
```

Promise Style

```js
  notes.find(id)
    .then(item => {
      if (item) {
        res.json(item);
      } else {
        next();
      }
    })
    .catch(err => {
      next(err)
    });
});
```

Notice, the callback is moved to the `.then()` and the error check condition has been extracted and moved to the `.catch()`.

Your challenge is to update the other queries (filter, update, create and delete) to use promises. As you work thru the challenge, verify your changes using Postman.

## BONUS: Update the client-side code

Currently, all the `api.METHOD()` functions in `api.js` on the client use callbacks. Your bonus challenge is to update `api.js` and all the functions that call the API. Thankfully, as of jQuery 3.0, the `$.ajax` returns a promise-like object which is fully Promises/A+ spec compliant - meaning they work the same as native Javascript Promises.

### Update `api.js` methods to return a promise

To help you get started, we've provided a before and after example of the `.search` method, see below.

Before: Callback Style

```js
  ...
  search: function (query, callback) {
    $.ajax({
      type: 'GET',
      url: '/api/notes/',
      dataType: 'json',
      data: query,
      success: callback
    });
  },
  ...
```

After: Promise Style

* Remove the `callback` parameter
* Remove the `success` property from the `$.AJAX` options object
* Return the promise `return $.ajax({...`.

```js
  ...
  search: function (query) {
    return $.ajax({
      type: 'GET',
      url: '/api/notes/',
      dataType: 'json',
      data: query
    });
  },
  ...
```

Before updating the other methods, you should verify your changes in a clean, standalone environment. Continually verifying your changes before proceeeding will help you become an efficient developer. It is the developer's equivalent to the carpenter's old adage "measure twice, cut once".

In the `/public` folder, create a temporary HTML file named `scratch.html` that loads jQuery and the `/scripts/api.js` file Then, in `<script>` tags, add the following function which test the `api.search` method. 

```html
<script>
  // test get all
  api.search({})
    .then(response => {
      console.log(response)
    });

  // test get all with search term
  api.search({searchTerm: 'cats'})
    .then(response => {
      console.log(response)
    });
</script>
```

Alternatively, you could create a separate `.js` file with the code and load in `scratch.html`.

Start your server and load `scratch.html` in your browser and check the console in Dev Tools. You should see the results from the API calls.

Your challenge is to update the other methods (`details`, `update`, `create` and `remove`) and verify them in the `scratch.html`. 

### EXTRA BONUS: Update client-side api calls to use promises

The extra bonus challenge is to update the `api.METHOD` calls throughout the client-side app. The `api.METHOD` calls use the callback style which you need to update to use promises. We'll help you with the first one.

> Hint. To find all the occurrences, search for `api.`. That's "a-p-i DOT". Below is a list based on the code in the recent solution branch.

* In the `index.js` file, you should find `api.search()`. Update the call to use promises


Before: Callback style

```js
api.search({}, response => {
  store.notes = response;
  noteful.render();
});
```

After: Promise style

```js
api.search({})
  .then(response => {
    store.notes = response;
    noteful.render();
  });
```

Your turn!

* In the `noteful.js` file you will find the following methods. Update each to use promises. Remember to check your changes in Dev Tools

  * In the `handleNoteItemClick()` method, update the `api.details()` call
  * In the `handleNoteSearchSubmit()` method, update the `api.search()` call
  * In the `handleNoteFormSubmit()` method, update the nested callbacks of `api.update()`, `api.create()` and `api.search()` to use chained `.then()` calls.
  * And in the `handleNoteDeleteClick()` method, update the nested callbacks of `api.remove()` and `api.search()` to use chained `.then()` calls.

If you run into issues with converting the nested callbacks to promise chains, simplify! Go back to your `scratch.html` file above and implement the solution in a clean, standalone environment. Once it is working, integrate it into the larger application. Below is a sample.

## Solutions

You can view an example solution and compare the differences between branches

* [solution/04-promises](https://github.com/thinkful-ei20/noteful-app-v1/tree/solution/04-promises)
* [compare the differences](https://github.com/thinkful-ei20/noteful-app-v1/compare/solution/03-restful...04-promises)

Good Luck!