vue前后端交互--day04

---

个人blog-1： 拾忆生活
个人blog-2： 极简-拾忆生活
欢迎大家来踩，同步更新

---

接口调用方式

• 原生ajax
• fetch
• axios
• async、await

URL地址格式

1.传统URL

格式：https://localhost:3000/a?query#fragment

• 协议
• 域名或IP地址
• 端口
• 路径
• 查询参数
• 锚点（哈希Hash）

2.Restful的URL【跟提交方式有关】

• http请求方式
  • GET 查询
  • POST 添加
  • PUT/PATCH 修改
  • DELETE 删除
• 通过在地址后直接加 / 来修改数据

分析下PUT和PATCH的区别：
实例：假设我们有一个UserInfo，里面有userId， userName， userGender等10个字段。现在只修改userName。

【PUT是全局更新，后端不仅更新接收到的userName字段，还更新其他的9个字段。】
【PATCH是局部更新，后端仅更新接收到的userName字段。】

异步

• JavaScript的执行环境是「单线程」

• 单线程，指一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个当前任务可称为主线程

• 异步模式可以一起执行多个任务

• JS中常见的异步调用

  • 1.定时任务
  • 2.ajax
  • 3.事件函数

一、promise（es6）

node环境中导入
npm init -y
npm i body-parser
npm i express
npm i nodemon

前期配置app.js

const express = require('express')
const bodyParser = require('body-parser')

const app = express()
// 处理静态资源
app.use(express.static('public'))
// 处理参数
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: false }));

// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
   
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', ['mytoken','Content-Type']);
  next();
});

···

// 启动监听
app.listen(3000, () => {
   
  console.log('running...')
})

1.简单实例

app.js

// 路由
app.get('/data', (req, res) => {
   
  res.send('Hello World!')
})
app.get('/data1', (req, res) => {
   
  setTimeout(function(){
   
    res.send('Hello TOM!')
  },1000);
})
app.get('/data2', (req, res) => {
   
  res.send('Hello JERRY!')
})

01.html

 var ret = '---';
 $.ajax({
   
   url: 'http://localhost:3000/data',
   success: function(data) {
   
     ret = data;
     //这里会显示路由中拿到的data的赋值【后执行】
     console.log(ret)
   }
 });
//因为异步，所以还是显示---【先执行】
 console.log(ret)

2.简单实例（异步函数不嵌套）

• 这里执行顺序不能确定

01.html

$.ajax({
   
  url: 'http://localhost:3000/data',
  success: function(data) {
   
    console.log(data)
  }
});
$.ajax({
   
  url: 'http://localhost:3000/data1',
  success: function(data) {
   
    console.log(data)
  }
});
$.ajax({
   
  url: 'http://localhost:3000/data2',
  success: function(data) {
   
    console.log(data)
  }
});

3.简单实例（异步函数嵌套）

• 这里执行顺序确定

$.ajax({
   
    url: 'http://localhost:3000/data',
    success: function(data) {
   
      console.log(data)
      $.ajax({
   
        url: 'http://localhost:3000/data1',
        success: function(data) {
   
          console.log(data)
          $.ajax({
   
            url: 'http://localhost:3000/data2',
            success: function(data) {
   
              console.log(data)
            }
          });
        }
      });
    }
  });

4.promise异步简单实例

• Promise(function(resolve, reject){...}

  • 第一个参数 resolve ：异步操作执行成功后的回调函数
  • 第二个参数 reject ：异步操作执行失败后的回调函数

• resolve('xxx');

  • 执行成功后的结果

• reject('xxx');

  • 执行失败后的结果

• 获取结果方法一：

  • then 函数，在函数里面的参数是$获取成功结果$，对应resolve函数
  • catch 函数，在函数里面的参数是$获取失败结果$，对应resolve函数

promise.then((result) => {
   
    console.log(result);
})
.catch((err)=> {
   
    console.log(err);
})

• 获取结果方法二：

  • 单独 then 方法 指定 resolved 状态和 reject 状态的回调函数
  • 第一个参数：获取成功结果
  • 第二个参数：获取失败结果

promise.then(function(data){
   
    console.log(data)
  },function(info){
   
    console.log(info)
  });

02.html

<script type="text/javascript">
  var p = new Promise(function(resolve, reject){
    
    //2. 这里用于实现异步任务  setTimeout
    setTimeout(function(){
    
      var flag = false;
      if(flag) {
    
        //3. 正常情况
        resolve('hello');
      }else{
    
        //4. 异常情况
        reject('出错了');
      }
    }, 100);
  });
  p.then(function(data){
    
    console.log(data)
  },function(info){
    
    console.log(info)
  });
</script>

5.promise异步简单实例【发送Ajax请求】

• 创建发送ajax请求的封装函数url， function queryData(url) {}

  • 里面创建一个Promise实例 var p = new Promise(function(resolve, reject){...}
  • 最后返回实例对象 return p;

• 调用封装函数url【发送多个ajax请求，并链式调用确保按顺序执行】

  • 异步继续调用，可以链式编程下去，需要 return

queryData('http://localhost:3000/data')
      .then(function(data){
   
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(...)

03.html

<script type="text/javascript">
//创建发送ajax请求的函数
  function queryData(url) {
    
  //  创建一个Promise实例
    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('http://localhost:3000/data')
    .then(function(data){
    
      console.log(data)
      return queryData('http://localhost:3000/data1');
    })
    .then(function(data){
    
      console.log(data);
      return queryData('http://localhost:3000/data2');
    })
    .then(function(data){
    
      console.log(data)
    });
</script>

6.promise 基本API

• console.dir(Object);
  • 打印出该对象的所有属性和属性值.

$实例方法:$

• .then()
  • 得到异步任务执行成功的结果