AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Vue异步数据交互 promise axios async fetch

分类：Promise作者：编程之家原文地址

接口调用方式

  • 前后端数据交互接口调用方式

    • 原生AJAX
    • 基于jQuery的AJAX
    • Promise
    • fetch API 接口调用
    • axios 接口调用
    • async/await 接口调用

  • URL地址格式

    • 传统形式的URL
      • schema://host:port/path?query#fragment
        • schema 协议。例如http https ftp 等
        • host 域名或者IP地址
        • port 端口，http默认端口80，可以省略
        • path 路径，例如/abc/a/b/c
        • query 查询参数，例如：uname=sunny&age=12
        • fragment 锚点(哈希Hash)，用于定位页面的某个位置
      • Resful形式的URL

异步编程

  • 异步
    • JavaScript的执行环境是「单线程」
    • 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务
    • 这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
    • 异步模式可以一起执行多个任务
    • JS中常见的异步调用
      • 定时任务
      • ajax
      • 事件函数
    • 多次异步调用的依赖分析
      • 多次异步调用的结果顺序不确定
      • 异步调用结果如果存在依赖,需要嵌套
// 回调地狱
$.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);
          }
        });
      }
    });
  }
});

异步编程Promise用法详解

  • Promise概述

    • Promise是异步编程的一种解决方案
    • 从语法上讲，Promise是一个对象，从它可以获取异步操作的消息

  • Promise好处

    • 可以避免多层异步调用嵌套问题(回调地狱)
    • Promise对象提供了简介的API，使得控制异步操作更加容易

Promise基本使用

  • Promise基本用法

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

  • Promise用法步骤

    • Promise的调入
      • 我们使用new来构建一个Promise，Promise的构造函数接收一个参数，是函数
      • 并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
    • 在函数体内实现异步任务
      • 正常情况，resolve()输出结果
      • 异常情况，reject()输出结果
    • Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数
    • 在then方法中，可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
// Promise基本使用
var p = new Promise(function(resolve, reject){ 
  // 这里用于实现异步任务
 setTimeout(function(){        
    var flag = true;        
    if(flag) {        
      resolve('hello');        
    }else{                   
      reject('出错了');        
    }      
  }, 100); 
});
p.then(function(data){
  console.log(data);
},function(info){
  console.log(info);
})

Promise发送Ajax请求并处理回调地狱问题

  • 基于Promise发送Ajax请求
    • 关于then()上一个then()的return值是下一个then()的调用值
    • then方法指定resolved状态和reject状态的回调函数
    • then()的返回值可以是一个Promise对象，也可以是一个非Promise对象
function queryData(url) {
     // 1.1 创建一个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) {
        // 1.2 处理正常的情况
        resolve(xhr.responseText);
      }else{
        // 1.3 处理异常情况
        reject('服务器错误');
      }
    };
    xhr.open('get', url);
    xhr.send(null);
  });
  return p;
}
// 注意：这里需要开启一个服务 
// 在then方法中，你也可以直接return数据而不是Promise对象
// 在后面的then中就可以接收到数据了
queryData('http://localhost:3000/data0')
  .then(function(data){
    console.log(data)
    // 1.4 想要继续链式编程下去 需要 return  
    return queryData('http://localhost:3000/data1');
  },function(info){
      console.log(info);
      return queryData('http://localhost:3000/data1');
  })
  .then(function(data){
    console.log(data);
    return queryData('http://localhost:3000/data2');
  },function(info){
      console.log(info);
      return queryData('http://localhost:3000/data2');
  })
  .then(function(data){
    console.log(data);
    return '数据调用结束！';
  },function(info){
      console.log(info);
      return '数据调用结束！';
  })
  .then(function(data){
    console.log(data);
  });

then方法参数中函数的返回值

  • 返回Promise实例对象

  • 返回普通值

    • 返回的普通值会直接传递给下一个then，通过then参数中函数的参数接受该值
function queryData(url) {
     // 1.1 创建一个Promise实例
  return new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState != 4) return;
      if(xhr.readyState == 4 && xhr.status == 200) {
        // 1.2 处理正常的情况
        resolve(xhr.responseText);
      }else{
        // 1.3 处理异常情况
        reject('服务器错误');
      }
    };
    xhr.open('get', url);
    xhr.send(null);
  });
}
// 注意：这里需要开启一个服务 
// 在then方法中，你也可以直接return数据而不是Promise对象
// 在后面的then中就可以接收到数据了
queryData('http://localhost:3000/data')
  .then(function(data){
    return queryData('http://localhost:3000/data1');
  })
  .then(function(data){
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            resolve('数据调用成功！);
        },1000)
    })
  })
  .then(function(data){
    console.log(data);
    return '数据调用结束！'
  })
  .then(function(data){
      console.log(data);
  });

Promise常用API

  • 实例方法
    • p.then() 得到异步任务的正确结果
    • p.catch() 获取异常信息
    • p.finally() 成功与否都会执行(尚且不是正式标准)
function foo() {
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            // resolve(123);
            reject('error');
        }, 100);
    })
}
foo()
    .then(function(data){
        console.log(data)
    })
    .catch(function(data){
        console.log(data)
    })
    .finally(function(){
        console.log('finished')
    });

// 等效写法
function foo() {
    return new Promise(function(resolve, reject){
        setTimeout(function(){
            // resolve(123);
            reject('error');
        }, 100);
    })
}
foo()
    .then(function(data){
    // 得到异步任务正确的结果
        console.log(data)
    },function(data){
    // 获取异常信息
        console.log(data)
    })
    // 成功与否都会执行（不是正式标准） 
    .finally(function(){
        console.log('finished')
    });

  • 对象方法

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

  • Promise.all()

    • 此方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例
    • 如果不是一个promise，该项会被用Promise.resolve转换为一个promise
    • 它的状态由这三个promise实例决定

  • Promise.race()

    • 此方法同样接受一个数组作参数。
    • 当p1, p2, p3中有一个实例的状态发生改变(变为fulfilled或rejected),p的状态就跟着改变。
    • 并把第一个改变状态的promise的返回值，传给p的回调函数
function queryData(url) {
  return 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);
  });
}
var p1 = queryData('http://localhost:3000/data');
var p2 = queryData('http://localhost:3000/data1');
var p3 = queryData('http://localhost:3000/data2');
// all中的参数[p1,p2,p3]和返回的结果一一对应
// ["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
Promise.all([p1, p2, p3]).then(function(res){
    console.log(res);
});
//由于p1执行较快，Promise的then()将获得结果
// 'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
Promise.race([p1, p2, p3]).then(function(res){
    console.log(res);
});

FetchAPI概述与基本使用

  • Fetch概述

    • 更加简单的数据获取方式，功能更强大、更灵活，可以看作是xhr的升级版
    • 基于Peomise实现的
    • fetch就是ajax+Promise使用的方式
    • 和jquery提供的$.ajax()差不多
    • fetch默认是get请求

  • 语法结构

    • Fetch API是新的ajax解决方案 Fetch会返回Promise
    • fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象
    • fetch(url, options).then(）
fetch(url).then(fn2)
  .then(fn3)
  .then(fn)

接口调用fetch用法

  • fetch基本用法
    • 第一个参数是请求的路径，Fetch会返回Promise所以我们可以使用then 拿到请求成功的结果
    • text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
fetch('http://localhost:3000/fdata')
  .then(function(data){
    return data.text();
  })
  .then(function(data){ 
    console.log(data);
  })

fetch请求参数

  • 常用配置选项

    • method(String):HTTP请求方法，默认为GET(GET、POST、PUT、DELETE)
    • body(String):HTTP的请求参数
    • headers(Object):HTTP的请求头，默认为{}

  • fetch API中的HTTP请求

    • fetch(url, options).then()
    • HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
      • 默认的是 GET 请求
      • 需要在options对象中指定对应的method[method:请求使用的方法]
      • post和普通请求的时候,需要在options中设置请求头headers和body

  • 服务器端配置方面

    • 若是出现application方面的错误
    • 对于同等级的请求头建议使用数组
      • 'Access-Control-Allow-Headers', ['Content-Type', 'mytoken']
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
// 处理静态资源
app.use(express.static('public'))
// 处理参数 获取POST过来的数据
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', ['Content-Type', 'mytoken']);
  // res.header('Access-Control-Allow-Headers', 'mytoken'); //出错根源
  next();
});

// 路由代码

// 启动监听
app.listen(3000, () => {
  console.log('网络服务器已运营...')
})
  • GET请求方式的参数传递
// 案例对比
fetch('/abc?id=123')
  .then(data => {
    return data.text();
  }).then(ret => {
    // 注意：这里是刚才得到的数据
    console.log(ret);
  })

fetch('/abc/123', {
  method: 'get'
}).then(data => {
    return data.text();
  }).then(ret => {
    // 注意：这里是刚才得到的数据
    console.log(ret);
  })

// GET参数传递 - 传统URL  通过url ？的形式传参 
fetch('http://localhost:3000/books?id=123', {
    method: 'get'       // get 请求可以省略不写 默认的是GET 
  })
  .then(function(data) {
    // 它返回一个Promise实例对象，用于获取后台返回的数据
    return data.text();
  }).then(function(data) {
    // 在这个then里面我们能拿到最终的数据  
    console.log(data)
  });
// 后台路由接口
app.get('/books', (req, res) => {
  res.send('传统的URL传递参数!' + req.query.id)
})

// GET参数传递 - restful形式的URL 通过 / 的形式传递参数  
// 即  id = 456 和id后台的配置有关   
fetch('http://localhost:3000/books/456', {
    method: 'get'         //  get 请求可以省略不写 默认的是GET 
  })
  .then(function(data) {
    return data.text();
  }).then(function(data) {
    console.log(data)
  });
// 后台路由接口
app.get('/books/:id', (req, res) => {
  res.send('Restful形式的URL传递参数!' + req.params.id)
})
  • DELETE请求方式的参数传递
// DELETE请求方式参数传递      
// 删除id  是  id=789
fetch('http://localhost:3000/books/789', {
    method: 'delete'
  })
  .then(function(data) {
    return data.text();
  }).then(function(data) {
    console.log(data)
  });
// 后台路由接口
app.delete('/books/:id', (req, res) => {
  res.send('DELETE请求传递参数!' + req.params.id);
})
  • POST请求方式的参数传递
// POST请求方式参数传递   
fetch('http://localhost:3000/books', {
    method: 'post',
    body: 'uname=sunny&pwd=123',      // 传递数据 
    headers: {      // 设置请求头 
      'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
    }
  })
  .then(function(data) {
      return data.text();
  }).then(function(data) {
      console.log(data);
  });
// 后台路由接口
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd);
})

// POST请求方式参数传递  
fetch('http://localhost:3000/books', {
    method: 'post',
    body: JSON.stringify({
        uname: 'sunny',
        pwd: '456'
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(function(data) {
      return data.text();
  }).then(function(data) {
      console.log(data);
  });
// 后台路由接口
app.post('/books', (req, res) => {
  res.send('POST请求传递参数!' + req.body.uname + '---' + req.body.pwd);
})
  • PUT请求方式的参数传递
    • 和POST方式类似，也是两种方式
// PUT请求方式参数传递 
fetch('http://localhost:3000/books/123', {
      method: 'put',
      body: JSON.stringify({
        uname: '张三',
        pwd: '789'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
  })
  .then(function(data) {
      return data.text();
  }).then(function(data) {
      console.log(data)
  });
// 后台路由接口
app.put('/books/:id', (req, res) => {
  res.send('PUT请求传递参数!' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

FetchAPI响应数据格式

  • fetch API中的响应格式

    • 用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象
    • 其中包括返回的一堆原始字节
    • 这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据
    • 比如JSON，BLOB或者TEXT等等

  • 响应数据格式

    • text() 将返回体处理成字符串类型
    • json() 返回结果和JSON.parse(responseText)一样
/*   Fetch响应结果的数据格式 text()   */
fetch('http://localhost:3000/json').then(function(data){
  return data.text(); //  //  将获取到的数据 转换成字符串 
}).then(function(data){
  var obj = JSON.parse(data);
  console.log(data);  
  console.log(data.uname,data.age);
  console.log(typeof data);    // string
  console.log(obj.uname,obj.age,obj.gender);
})

/*   Fetch响应结果的数据格式 json()   */
fetch('http://localhost:3000/json').then(function(data){
  return data.json();   //  将获取到的数据使用 json 转换对象
}).then(function(data){
    console.log(data);
    console.log(data.uname);
    console.log(typeof data);    // object
})

axios概述与基本用法

  • axios 基本特性
    • 基于promise用于浏览器和node.js的http客户端
    • 支持浏览器和node.js
    • 支持promise
    • 能拦截请求和响应
    • 自动转换JSON数据
    • 能转换请求和响应数据

axios基本用法

  • get和delete请求传递参数

    • 通过传统的url 以 ? 的形式传递参数
    • restful 形式传递参数
    • 通过params 形式传递参数

  • post和put请求传递参数

    • 通过选项传递参数
    • 通过URLSearchParams传递参数

  • 发送get请求

// 发送get请求
axios.get('http://localhost:3000/adata')
  .then(function(ret){ 
    console.log(ret.data);
    console.log(ret);
  })
// 后台接口代码
app.get('/adata', (req, res) => {
  res.send('Hello axios!');
})

axios常用API

  • 常用API

  • get请求传递参数

    • 通过传统的url 以 ? 的形式传递参数
    • restful形式传递参数
    • 通过params形式传递参数
// 通过传统的url 以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123')
  .then(function(ret){
    console.log(ret.data);
  })
// 后台代码
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})

// restful 形式传递参数
axios.get('http://localhost:3000/axios/123')
  .then(function(ret){
    console.log(ret.data);
  })
// 后台代码
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})

// 通过params  形式传递参数
axios.get('http://localhost:3000/axios', {
    params: {
      id: 789
    }
  }).then(function(ret){
    console.log(ret.data)
  })
// 后台代码
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
  • delete请求传递参数
    • 传参的形式和 get 请求一样
// 通过params  形式传递参数
axios.delete('http://localhost:3000/axios', {
    params: {
      id: 111
    }
  }).then(function(ret){
    console.log(ret.data)
  })
// 后台代码
app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
  • post请求传递参数
    • 通过选项传递参数
    • 通过URLSearchParams传递参数
// 通过选项传递参数
axios.post('http://localhost:3000/axios', {
  uname: 'sunny',
  pwd: 123
}).then(function(ret){
  console.log(ret.data);
})
// 后台代码
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd);
})

// 通过选项传递参数
var params = new URLSearchParams();
params.append('uname', 'Tom');
params.append('pwd', '025');
axios.post('http://localhost:3000/axios', params).then(function(ret){
  console.log(ret.data);
})
// 后台代码
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd);
})
  • put请求传递参数
    • 和post请求一样
// 通过选项传递参数
axios.put('http://localhost:3000/axios/123', {
  uname: 'Jerry',
  pwd: 123567
}).then(function(ret){
  console.log(ret.data);
})
// 后台代码
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

axios的响应结果

  • 响应结果的主要属性
    • data 实际响应回来的数据
    • headers 响应头信息
    • status 响应状态码
    • statusText 响应状态信息
// 响应 字符串 数据
axios.get('http://localhost:3000/axios?id=987')
  .then(function(ret){
    console.log(typeof ret.data);
    console.log(ret.data);
    console.log(ret);
  })
// 后端代码
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})

// 响应 对象 数据
axios.get('http://localhost:3000/axios-json')
  .then(function(ret){
    console.log(typeof ret.data);
    console.log(ret.data);
    console.log(ret);
  })
// 后端代码
app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'Jerry',
    age: 12
  });
})

axios的全局配置

  • 配置 默认地址

    • axios.defaults.baseURL = 'https://api.example.com';

  • 配置 超时时间

    • axios.defaults.timeout = 2500;

  • 配置 公共请求头

    • axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    • 后台跨域配置
      • res.header('Access-Control-Allow-Headers', ['Content-Type', 'mytoken']);
      • 后台跨域配置相同的键值用数组包含，单独写很可能会出错

  • 配置 公共的post的Content-Type

    • axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/* axios响应结果与全局配置 */
// 配置 超时时间
axios.defaults.timeout = 10;
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000';
// 配置请求头信息
axios.defaults.headers.common['mytoken'] = 'hello';

axios.get('axios-json')
  .then(function(ret){
    console.log(ret.data);
  })

axios拦截器

  • 请求拦截器
    • 请求拦截器的作用是在请求发送前进行一些操作
    • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
axios.interceptors.request.use(function(config) {
  console.log(config.url)
  // 任何请求都会经过这一步   在发送请求之前做些什么   
  config.headers.mytoken = 'nihao';
  // 这里一定要return   否则配置不成功  
  return config;
}, function(err){
  // 对请求错误做点什么    
  console.log(err)
})
axios.get('http://localhost:3000/adata')
  .then(function(data){
    console.log(data);
  })

axios.interceptors.response.use(function(res) {
  // 在接收响应做些什么  
  var data = res.data;
  return data;
}, function(err){
  // 对响应错误做点什么  
  console.log(err)
})
axios.get('http://localhost:3000/adata')
  .then(function(data){
    console.log(data);
  })

axios.interceptors.request.use(function(config) {
  console.log(config.url);
  // 任何请求都会经过这一步   在发送请求之前做些什么   
  config.headers.mytoken = 'success';
  // 这里一定要return   否则配置不成功  
  return config;
}, function(err){
  // 对请求错误做点什么    
  console.log(err)
})
axios.interceptors.response.use(function(res) {
  // 在接收响应做些什么  
  var data = res.data;
  console.log(data+ '响应拦截');
  return data;
}, function(err){
  // 对响应错误做点什么  
  console.log(err)
})
axios.get('http://localhost:3000/adata')
  .then(function(data){
    console.log(data);
  })

异步函数async/await概述与基本用法

  • async/await概述
    • async/await是ES7引入的新语法，可以更加方便的进行异步操作
    • async关键字用于函数上(async函数的返回值是Promise实例对象)
    • await关键字用于async函数当中(await可以得到异步的结果)
async function queryDate(id){
  const ret = await axios.get('/data');
  return ret;
}
queryData.then(ret=>{
  console.log(ret);
})

async/await基本用法

  • async作为一个关键字放到函数前面

  • await关键字只能在使用async定义的函数中使用

    • await后面可以直接跟一个 Promise实例对象
    • await函数不能单独使用

  • async/await 让异步代码看起来、表现起来更像同步代码

axios.defaults.baseURL = 'http://localhost:3000';
/*
async function queryData(){
   const ret = await axios.get('adata');
   return ret.data;
} 
*/
async function queryData(){
    var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
            resolve('Hello');
        },2000)    
    });
    return ret;
} 
queryData().then(function(data){
    console.log(data);
})

async/await处理多个异步请求

// 多次异步调用
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData(){
    var info = await axios.get('async1');
    var ret = await axios.get('async2?info='+ info.data);
    return ret.data;
} 
queryData().then(function(data){
    console.log(data);
})
// 后台路由代码
app.get('/async1', (req, res) => {
  res.send('hello')
})
app.get('/async2', (req, res) => {
  if(req.query.info == 'hello') {
    res.send('world')
  }else{
    res.send('error')
  }
})

案例：图书管理系统

  • 图书相关的操作基于后台接口数据进行操作

  • 需要调用接口的功能点

    • 图书列表数据加载 GET http://localhost:3000/books
    • 添加图书 POST http://localhost:3000/books
    • 验证图书名称是否存在 GET http://localhost:3000/books/book/:name
    • 编辑图书-根据ID查询图书信息 GET http://localhost:3000/books/:id
    • 编辑图书-提交图书信息 PUT http://localhost:3000/books/:id
    • 删除图书 DELETE http://localhost:3000/books/:id

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

javascript – 使用mongoose进行Promise / async-await,返回空数组
最后的控制台返回空数组.控制台在ids.map函数完成之前运行varids=[];varallLync=[]varuser=awaitUser.findOne(args.user)ids.push(user._id)user.following.map(x=>{ids.push(x)})ids.map(asyncx=>{varlync=aw...
rxJava和promises之间的关系
我正在尝试将rxJava与我已经知道的内容联系起来,特别是来自JavaScript编程.rxJava的核心思想是否就像可观察者的承诺一样？解决方法:正如评论所解释的那样,承诺将允许您进行连锁操作,但最终,您将获得一个结果.使用RxJ...
微信小程序前端promise封装
config.jsconstconfig={base_url_api:"https://douban.uieee.com/v2/movie/",}export{config}http.jsimport{config}from"../config";classHTTP{requset({url,method="GET",data={}}){...
javascript – 回复承诺？
我正在阅读MDN中的javascript,并且遇到了这个谈论承诺并且不明白它意味着什么的部分.代码非常简单,但我不明白谨慎.回报承诺意味着什么？隐含地返回是什么意思？如果它是一个愚蠢的问题,请指向一些资源,我会将其标记为...
微信小程序前端promise封装
config.jsconstconfig={base_url_api:"https://douban.uieee.com/v2/movie/",}export{config}http.jsimport{config}from"../config";classHTTP{requset({url,method="GET",data={}}){...
我怎么在这里滥用C承诺和期货？
这是我的代码main.cpp：#include<string>#include<iostream>#include<future>intmain(){usingnamespacestd;autop=promise<string>();p.set_value("Hello,world.");autof=p.get_fu...
javascript – 按顺序排列的多个jQuery承诺
基本上我想要这个：functiondo_ajax_calls(...){vard=$.Deferred();$.ajax(args).done(function(){$.ajax(args).done(function(){$.ajax(args).done(function(){d.resolve();});});})returnd.promise();}但是ajax调
javascript – Promise不是构造函数
我正在尝试使用promise而是出现类型错误：Promise不是构造函数.这是承诺：varPromise=newPromise(function(resolve,error){for(varkeyinexcludeValues){/*someifs*/minVal=someVa
javascript – 如何一个接一个地解决承诺？
我怎么能一个接一个地解雇承诺呢？waitFor(t),是一个返回在t时间后解析的promise的函数.我希望能做的是：waitFor(1000)Thenwhenfinished,console.log('Finishedwaitof1000millis')thenwaitFor(2000)Thenwh...
测试Promise与Async/await的基本使用
想在项目中用,发现自己不是很熟promise基本使用基本使用-思路newPromise()返回了一个状态机一个完全无法被外界影响的状态机构造函数,传入一个函数,两个参数,分别是reslove,reject表示执行的回调函数,也就是.then(),....
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native