Vue中使用axios(Promise)

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

一、axios的使用

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

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

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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代表的是转向失败态
resolvereject****均是函数
Vue中使用axios(Promise)_第1张图片
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();
  })
}

调用:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>

如果大家想一起交流学习,共同进步,欢迎搜索公众号“是日前端”,输入关键词如:前端基础,获取资料,资料刚开始整理,目前还在完善中,点击交流群按钮进交流群,群里仅限技术交流、面试交流等,需要其它相关资料可以群里说,后续交流群人数增多会考虑特色内容,再次感谢大家的支持~

你可能感兴趣的:(#Vue,前端,#,前端基础,vue,ajax,javascript,js,前端)