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

原创已于 2022-02-11 10:56:32 修改 · 3.4k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前后端交互

前后端交互模式

接口调用方式
- 原生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(data){
        console.log(data)
        return queryData('127.0.0.1:8081/vue/test');
      })
      .then(function(data){
        console.log(data);
        return queryData('127.0.0.1:8081/vue/test');
      })
      .then(function(data){
        console.log(data)
      });

then参数中的函数返回值

返回Promise实例对象

返回的该实例对象会调用下一个then

返回普通值

返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

Promise常用的API

实例方法

p.then()得到异步任务的正确结果
p.catch()获取异常信息
p.finally()成功或者失败都会执行

var promise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        var flag = false;
        if (flag) {
            resolve('hello');
        } else {
            reject('出错了');
        }
    }, 1000);
});
//正常结果
promise.then(function (data) {
    console.log(data);
    //异常结果
}).catch(function (data) {
    console.log(data);
    //都会执行
}).finally(function () {
    console.log('finished');
});

对象方法

Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果

Promise.all([a1,a2,a3]).then(function (result) {
    console.log(result)
});

Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果

Promise.race([a1,a2,a3]).then(function (result) {
    console.log(result)
});

fetch≈ajax pro

基本用法

fetch('http://localhost:8081/vue/vueTest').then(function (data) {
    // 返回一个Promis实例对象
    return data.text();
}).then(function (data) {
    console.log(data);
});

常用配置选项

method(String
body(String)
headers(Object)

GET请求

fetch('http://localhost:8081/vue/success',{
    method:'get'
}).then(function (data) {
    // 返回一个Promis实例对象
    return data.text();
}).then(function (data) {
    console.log(data);
});

POST请求

fetch('http://localhost:8081/vue/success', {
    method: 'post',
    body: 'username=张三&password=123',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
}).then(function (data) {
    // 返回一个Promis实例对象
    return data.text();
}).then(function (data) {
    console.log(data);
});

响应结果

text():返回结果处理成字符串类型
json():将字符串转换为对象

fetch('http://localhost:8081/vue/success', {
    method: 'put',
    body: JSON.stringify({
        username: '张三',
        password: 123
    }),
    headers: {
        'Content-Type': 'application/json'
    }
}).then(data => {
    return data.json();
}).then(data => {
    console.log(data);
});

接口调用-axios

基于Promise用于浏览器的HTTP客户端

支持浏览器
支持promise
拦截请求和响应
自动转换JSON数据

axios.get('http://localhost:8081/vue/success').then(data => {
    console.log(data.data);
});

axios的参数传递

axios.get('http://localhost:8081/vue/success?username=张三&password=123').then(data => {
    console.log(data.data);
});

axios.get('http://localhost:8081/vue/success/zhangsan/123').then(data => {
    console.log(data.data);
});

axios.get('http://localhost:8081/vue/success',{
    param:{
        username:"王五",
        password:213
    }
}).then(data => {
    console.log(data.data);
});

Post

axios.post('http://localhost:8081/vue/success',{
    param:{
        username:"王五",
        password:213
    }
}).then(data => {
    console.log(data.data);
});

const params=new URLSearchParams();
params.append('username',"张三");
params.append('password','767');

axios.post('http://localhost:8081/vue/success',params
).then(data => {
    console.log(data.data);
});

axios的响应结果

data（自动帮我们转为json了）
headers
status
statusText

axios的全局配置

// 超时时间
axios.default.timeout = 3000;
// 默认地址
axios.defaults.baseURL = "http://localhost:8081/";
// 设置请求头
axios.defaults.headers['myToken']='hello headers';
const params = new URLSearchParams();
params.append('username', "张三");
params.append('password', '767');
axios.post('vue/success', params
).then(data => {
    console.log(data);
});

axios拦截器

请求拦截器

拦截axios发出的请求

axios.interceptors.request.use(function (config) {
    console.log(config.url);
    config.headers.myToken='Hello';
    return config;
},function (err) {
    console.log(err);
});

响应拦截器

拦截客户端返回的数据，并对数据做一些操作

    axios.interceptors.response.use(function (res) {
        const data = res.data;
        return data;
    }, function (err) {
        console.log(err);
    });

异步操作-async/await

async关键字作用在函数上

await关键字用于async函数当中

async function queryMsg() {
    const result = await axios.get('vue/success');
    return result;
}

queryMsg().then(result =>{
    console.log(result);
})

async function queryMsg() {
    const result = await new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('hello');
        }, 1000);
    });
    return result;
}
queryMsg().then(result => {
    console.log(result);
})

处理多个异步请求，await保证处理顺序

// 默认地址
axios.defaults.baseURL = "http://localhost:8081/";

async function queryMsg() {
   var info=await axios.get('vue/success');
   var ret=await axios.get('vue/success?username='+info.data.username+'&password='+info.data.password);
    return ret;
}
queryMsg().then(result => {
    console.log(result.data);
})