Vue中使用axios(Promise)

前端小白简单总结，参考黑马珠峰等课程以及其他内容整合，还望各位大佬多多指教~

一、axios的使用

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF 简单来说就是将ajax基于Promise进行了一个封装

vue中基本的使用方法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/vue.js"></script>

<script>
  let vm = new Vue({
    el: '#app',
    created(){ // 在数据被初始化后会调用，this指向的也是vm实例，钩子函数
      this.getData();
    },
    data: {
      products: []
    },
    methods: {
      getData(){ // 初始化方法
        // 专门用来发送ajax的方法
        // 回调函数中的this指向的是window，因此要用箭头函数
        // Promise 解决回调问题的
        axios.get('./cart.json').then(res => { // success
          this.products = res.data; // 获取数据 需要的是res.data
        },err => { // error
          console.log(err);
        });
      }
    }
  })
</script>
</body>
</html>

二、Promise原理

Promise：英文意思承诺，第4版红宝书译为期约，大概意思差不多，就是承诺在某个时间点会将数据返回给你在Promise之前，异步操作是利用回调函数来解决的。

回调函数：将后续的处理逻辑传入到当前要做的事，事情做好后调用此函数

// 做饭 -> 买菜
// 将后续的做饭传入买菜中
function buy(callback) {
  setTimeout(() => {
    let a = '蘑菇';
    callback(a)
  }, 2000);
}
buy(function cook(val) {
  console.log(a);
});

Promise就是用来解决回调问题的，避免函数层层嵌套的"回调地狱"，严重影响了代码的可读性 Promise有三个状态：成功态、失败态、等待 其中，resolve代表的是转向成功态 reject代表的是转向失败态 resolve和reject****均是函数 在这里插入图片描述 Promise的实例最基础的就是then方法，then方法中有两个参数，分别是两个函数，第一个函数是在Promise转向resolve执行的方法，第二个函数是在Promise转向reject执行的方法

let p = new Promise((resolve, reject) => {
  setTimeout(function () {
      let a = '蘑菇';
      resolve(a);
      reject(a);
  }, 2000)
});
p.then((data) => {console.log(data)}, (err) => {console.log(err)});

实例：买包

function buyPack() {
  return new Promise((resolve, reject) => {
      setTimeout(() => {
          if(Math.random()>0.5){
            resolve('买')
          }else{
            reject('不买')
          }
      }, Math.random() * 1000);
  });
}
buyPack().then(function (data) {
  console.log(data);
}, function (data) {
  console.log(data);
});

三、基于Promise手动封装ajax

/* 4.promise-ajax.js */
function ajax({url='xxx', type="get", dataType="json"}) {

  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open(type, url, true);
    xhr.responseType = dataType;
    xhr.onload = function () { // xhr.readState=4 xhr.status=200
      if(xhr.status == 200){
        resolve(xhr.response) //成功调用成功的方法
      }else{
        reject('not found');
      }
    };
    xhr.onerror = function (err) {
        reject(err) // 失败调用失败的方法
    };
    xhr.send();
  })
}

调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app"></div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="4.promise-ajax.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      created(){
        ajax({url: './carts.json'}).then((res)=>{
          console.log(res)
        }, (err)=>{
          console.log(err)
        })
      },
      data: {
        products: []
      }
    })
  </script>
</body>
</html>