Axios Error Handling （axios有更为精细的错误划分 error.reponse, error.request）

axios-error-handling.markdown

Axios Error Handling

A Pen by liuxiaomingskm on CodePen.

License.

index.html

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<button>CLICK</button>

<section id="comments"></section>

script.js

var btn = document.querySelector("button");
var section = document.querySelector("#comments");
btn.addEventListener("click", sendRequest);

function sendRequest(){
  axios.get("https://jsonplaaskjldceholder.typicode.com/comments", {
    params: {
      postId: 1
    }
  })
  .then(addComments)
  .catch(handleErrors)
 }

function addComments(res){
  res.data.forEach(function(comment){
    appendComment(comment);
  });
}

function appendComment (comment){
  var newP = document.createElement("p");
  newP.innerText = comment.email;
  section.appendChild(newP);
}

function handleErrors(err) {
    if (err.response) {
      console.log("Problem With Response ", err.response.status);
    } else if (err.request) {
      console.log("Problem With Request!");
    } else {
      console.log('Error', err.message);
    }
  }