Vue学习笔记（2）前后端接口调用

程序员小赵OvO

已于 2022-02-11 10:56:32 修改

阅读量3.4k

点赞数 1

文章标签： vue

于 2020-10-18 17:23:26 首次发布

本文链接：https://blog.csdn.net/h13245/article/details/109147490

版权

本文详细探讨了Vue应用中前后端接口的交互，包括前后端交互模式、Promise的使用、fetch API和axios库的应用。重点讲解了Promise解决异步调用的嵌套问题，以及axios的参数传递、响应结果和拦截器的配置。同时，介绍了async/await在处理异步操作中的作用，确保请求的顺序执行。

摘要由CSDN通过智能技术生成

前后端交互

前后端交互模式

接口调用方式
- 原生ajax
- 基于JQuery的ajax
- fetch
- axios

传统形式的URL：协议（http，https）+host（www.baodu.com）+端口（80）+路径（/admin/getBlankTable）+query（查询参数?username=admin&age=12）+fragment（锚点，定位页面的某个位置

http://www.tradition.com/admin/getBlankTable?username=admin&age=12#chapter

Restful形式的URL：

127.0.0.1:8080/books GET

127.0.0.1:8080/books POST

127.0.0.1:8080/book/123 PUT

127.0.0.1:8080/book/123 DELETE

Promise

异步调用

多次异步调用的结果无法确定

异步调用结果如果存在依赖需要嵌套

Promise概述

优点：

可以避免多层异步调用嵌套问题（回调地狱）
提供简介的API，控制异步更加容易

Promise基本用法

实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var promise=new Promise(function (resolve, reject) {
   
    setTimeout(function () {
   
        var flag=true;
        if(flag){
   
            resolve('hello');
        }else{
   
            reject('出错了');
        }
    },1000);
});
promise.then(function (data) {
   
    //从resolve得到正常结果
    console.log(data);
},function (info) {
   
    //从reject得到错误信息
    console.log(info);
})

reslove：成功

reject：失败

基于Promise处理Ajax请求

 function queryData(url) {
   
      var p = new Promise(function(resolve, reject){
   
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
   
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
   
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
   
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    // queryData('127.0.0.1:8081/vue/test')
    //   .then(function(data){
   
    //     console.log(data);
    //   },function(info){
   
    //     console.log(info)
    //   });
    // ============================
    // 发送多个ajax请求并且保证顺序
    queryData('127.0.0.1:8081/vue/test')
      .then(function(