VUE04_Promise的概述、常用API、静态方法、axios基于不同请求传参、拦截器、async/await用法

最新推荐文章于 2023-01-08 14:15:33 发布
最新推荐文章于 2023-01-08 14:15:33 发布
阅读量1.1k 收藏 70
点赞数 19
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TZ845195485/article/details/117651862
版权

文章目录

①. Promise的概述和使用

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

  • ②. 好处

  1. 可以避免多层异步调用嵌套问题(回调地狱)
  2. Promise对象提供了简洁的API,使得控制异步操作更加容易
  • ③. 具体使用步骤
    实例化Promise对象,构造函数中传递函数,该函数中用于处理异步任务
    resolve和reject两个参数用于处理成功和失败两种情况,并通过p.then获取处理结果
var p = new Promise(function (resolve, reject) {
    setTimeout(() => {
        if (false) {
            resolve('TANGZHI');
        } else {
            reject('ERROR');
        }
    }, 2000);
});
p.then(function (ret) {
    //这是成功调用的结果
    console.log(ret);
},function(ret){
    //这是失败的结果
    console.log(ret);
});

②. Promise常用API(实例方法)

  • ①. .then()：得到异步任务正确的结果

  • ②. .catch()：获取异常信息

  • ③. .finally()：成功与否都会执行(不是正式标准）

 <script>
  //console.dir():可以显示一个对象所有的属性和方法,用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
  //console.dir(Promise);
  //第一种方法
  function po(){
      return new Promise(function(resolve,reject){
         setTimeout(function(){
             //resolve('hello xiaozhi');
             reject('Error');
         },3000);
      });
  }
  //第一种方式
  po()
  //方法成功时会调用这里
  .then(reponse=>{
     console.log(reponse);
  })
  //方法失败时会调用这里
  .catch(reponse=>{
     console.log(reponse);
  })
  //无论方法是否成功,这里都会被调用
  .finally(()=>
     console.log('finished')
   );
  //第二种方式 
  //[第一种方式和第二种方式是等价的]
  po()
  .then(function(ret){
     //这里是成功后的回调
     console.log(ret)
  },function(ret){
     //这里是失败后的回调
     console.log(ret);
  })
  .finally(()=>{
     alert("第二种方式finally...") 
  });
 </script>

③. Promise中的静态方法

  • ①. Promise.all()接受Promise对象组成的数组作为参数，它的返回参数也是数组。当promise的全部为resolve后，它才会进入.then()方法，只要有一个promise为reject，它就会进入.catch()
    并发处理多个异步任务,所有任务都执行完成才能得到结果

  • ②. Promise.race()接受的参数与Promise.all()一样，不同的是，它会辨别最快达到resolve或者reject的promise对象，如果这个最快是resolve，则进入.then()方法，如果是reject，则进入.catch()方法。
    并发处理多个异步任务,只要有一个任务完成就能得到结果
    在这里插入图片描述

④. axios介绍

  • ①. 支持浏览器、node.js、Promise

  • ②. 自动转换JSON数据,能转换请求和响应数据

  • ③. 能拦截请求和响应(强大)

⑤. axios基础用法(get和delete)

  • ①. 通过传统的url 以 ? 的形式传递参数

  • ②. restful 形式传递参数

  • ③. 通过params 形式传递参数(方便)

 <script src="../js/axios.js"></script>
 <script src="../js/vue.js"></script>
 <script>
  //1. 发送get 请求
  //通过传统的url 以 ? 的形式传递参数
  axios.get('http://127.0.0.1:30021/staffSelect/list?page=1&&limit=10').then(response=>{
       //注意data属性是固定的用法，用于获取后台的实际数据
       console.log(response.data);//Object { code: 0, msg: "", data: (10) […], count: 27476 }
       console.log(response);//Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
   });
   //2.发送get请求
   //restful 形式传递参数 http://127.0.0.1:30021//menu/get/{}
   axios.get('http://127.0.0.1:30021//menu/get/1').then(function(reponse){
       //Object { result: true, data: {…}, msg: "查询成功" }
       console.log(reponse.data);
   });
  //3. 通过params形式传递参数
   axios.get('http://127.0.0.1:30021/staffSelect/list',{
         params:{
             page:1,
             limit:10
     }
   }).then(response=>{
       //注意data属性是固定的用法，用于获取后台的实际数据
       console.log(response.data);//Object { code: 0, msg: "", data: (10) […], count: 27476 }
       console.log(response);//Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
   });
 //4. axios delete 请求传参 传参的形式和 get 请求一样
 axios.delete('http://localhost:3000/axios', {
   params: {
       id: 111
   }
 }).then(rep=>{
     console.log(rep.data);
 });
 </script>

⑥. axios基础用法(post和put)

  • ①. 对于传统的方式我们需要使用new URLSearchParams()

  • ②. Post请求是json格式的传参

 <script>
    //通过选项传递参数(默认传递的是json格式的数据)
    //{uname:'lisi',pwd:123}
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function (ret) {
      console.log(ret.data)
    });
    //对于传统的方式我们需要创建一个URLSearchParams对象(application/x-www-form-urlencoded)
    //将参数append进去
    //传递参数的格式  uname=zhangsan&pwd=111 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function (ret) {
      console.log(ret.data)
    })

    // axios put 请求传参
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function (ret) {
      console.log(ret.data)
    })
    var vm = new Vue({
      el: '#app',
      data: {

      }
    });
  </script>

⑦. axios的响应结果

  • ①. data：实际响应回来的数据

  • ②. status：响应转态码(200表示成功)

  • ③. headers：相应头的信息

  • ④. statusText：响应状态信息

⑧. axios 全局配置

  • ①. 配置公共的请求头
    axios.defaults.baseURL = ‘https://api.example.com’;

  • ②. 配置超时时间
    axios.defaults.timeout = 2500;

  • ③. 配置公共的请求头
    axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;

  • ④. 配置公共的 post 的 Content-Type
    axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
    加了这个参数,那么传参格式就是 uname=zhangsan&pwd=111
    在axios中我们默认是采用JSON格式进行传参的

在这里插入图片描述

⑨. axios 拦截器

  • ①. 请求拦截器
  1. 请求拦截器的作用是在请求发送前进行一些操作
  2. 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
   	//请求拦截器
   axios.interceptors.request.use(config => {
       console.log(config.url);
       config.headers.myToken = 'xiaozhi';
       return config;
   }, error => {
       console.log(error);
   });
  • ②. 响应拦截器
  1. 响应拦截器的作用是在接收到响应后进行一些操作
  2. 例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页
     //响应拦截器
     axios.interceptors.response.use(reponse => {
         //这里的reponse和axios.get().then(response) 是一样的
         //注意:如果这里data做了处理,那么在axios.get().then(response) 中得到的data就是这里return回去的
         var data = reponse.data;
         console.log("----" + data);
         return data;
     }, error => {
         console.log(error);
     });

     axios.get('http://127.0.0.1:30021/staffSelect/list?page=1&&limit=10').then(response => {
         //注意data属性是固定的用法，用于获取后台的实际数据
         //console.log(response.data);//Object { code: 0, msg: "", data: (10) […], count: 27476 }
         //这里的response是真实的数据,我们在响应拦截器中做了处理
         console.log(response);//Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
     });

⑩. async/await用法

  • ①. async作为一个关键字放到函数前面
    任何一个async函数都会隐式返回一个promise

  • ②. await关键字只能在使用async定义的函数中使用
    await后面可以直接跟一个Promise实例对象
    await函数不能单独使用

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

    // 1.  async 基础用法
    // 1.1 async作为一个关键字放到函数前面
	async function queryData() {
      // 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
	// 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })

	//2.  async    函数处理多个异步函数
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      //2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      
      var info = await axios.get('async1');
      //2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })
所得皆惊喜
关注
  • 19
    点赞
  • 踩
  • 70
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
专栏目录
Axios用法详解
marylgao技术专栏
05-05 730
基本介绍 Axios是一个异步的http框架，可以在浏览器和nodejs中使用 特征 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 全局方法 axios.request(config) axios.get(url[, con...
promise对象与promise在vue axios响应拦截器中的应用
MJ的博客
01-14 2237
目录 一.深入理解promise 二、promise在vue响应拦截器的实际应用 console.log('start') setTimeout(()=>{console.log('请求后端数据（约3秒）')}, 3000); console.log('end') 代码分析1 js异步执行，不阻塞,但有些操作之后需要执行回调。下例可以简单实现回调，但这种回调是定时回调，如下请求后端数据，给定3s，如3s后端还没返回，这时执行回调得不到数据，或后端1s就已返回，前端却固定3s才能执行回调，.
axios系列之静态方法的使用
老__L的博客
01-08 686
axios系列之静态方法的使用
API异步请求数据用async/await
weixin_38002190的博客
01-09 1717
先异步请求完所有数据后新建数组 把数组push到新的数组里边去。然后再API接口请求方法用
vue3.2 响应拦截器
grow_的博客
02-21 846
登录中打印结果，适当修改 src/api/request.js // 响应拦截器 service.interceptors.response.use( (response) => { const { data, meta } = response.data if (meta.status === 200 || meta.status === 201) { return data } else { ElMessage({ showC
vue中axios请求的封装实例代码
10-17
在Vue.js应用中，使用axios进行HTTP请求是常见的实践，因为axios是一个强大的、基于Promise的库，支持在浏览器和Node.js环境中使用。Vue官方也推荐使用axios作为HTTP库。为了提高代码的可维护性和复用性，通常会对其...
vue+ts下对axios的封装实现
10-15
本文将详细介绍如何在Vue+TS项目中对axios进行封装，包括设置拦截器来处理请求和响应。 首先，确保你已经安装了axios。在终端中运行以下命令来安装它： ```bash npm install axios -D ``` 接下来，我们将创建一个...
order_manager:点餐后端。使用了fly（类似axios,用vue都知道）管理http请求,使用 async await等来进行管理http请求，使用请求拦截器根据分类进行code码提示和初始界面懒加载和请求错误处理，
05-10
order_manager点餐后端。使用了fly（类似axios,用vue都知道）管理http请求,使用 async await等来进行管理http请求，使用请求拦截器根据分类进行code码提示和初始界面懒加载和请求错误处理，
Vue组件从后端API获取数据并渲染到页面上设计方案和实现方法
03-13
关于前端与后端的交互，除了Fetch API，还可以使用其他的HTTP库，比如axios，它更适用于Vue项目，提供了更好的错误处理和拦截器功能。例如，使用axios获取数据的代码如下： ```javascript import axios from 'axios...
nuxt+axios实现打包后动态修改请求地址的方法
11-20
其他axios配置和拦截器 } ``` 通过这种方式，我们可以在不重新打包的情况下，根据部署的服务器环境动态调整请求地址。例如，如果项目部署在开发和生产两个不同的环境中，只需要在每个环境中对应的服务器上更新`...
async await
weixin_54534151的博客
05-08 388
Async 和 await 是一种同步的写法，执行异步的操作 1.sayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数 2.异步async函数调用，跟普通函数的使用方式一样 3.异步async函数返回一个promise对象 4.async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的 优点：*** 1.同步代码编写方式： Promise使用then函数进行链式调用，async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；
axios的使用
gfhdgo的博客
11-22 935
一、axios的下载 1.在javascript中可以通过bootcdn(https://www.bootcdn.cn/axios)中获取script标签和链接 2.在node中，直接在打开当前目录的控制台，输入 npm install axios --save,进行安装，如果没有进行过初始化，先要执行 npm init 命令，先进行初始化。初始成功的条件是，在初始化的目录下会生成一个package.json的文件。 二、axios的请求配置 一、axios的静态方...
拦截器函数
seimeii的博客
08-05 807
axios.interceptors.request.use axios.interceptors.response.use
axios.all方法
m0_52724742的博客
08-11 9990
axios.all方法 axios.all; axios.spread; 作用:解决并发请求; 语法: axios.all([fn1(),fn2()]).then((fn1,fn2)={ console.log(res1,res2)//res1为fn1函数的返回值,res2为fn2函数的返回值 }) 该方法是基于promise.all的 例子: methods: { fn1(){ return this.$axios.get(`url1`) }, fn2(){
Vue接口调用（三）async/await用法
热门推荐
m0_55990909的博客
04-06 1万+
async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法，可以更加方便的进行异步操作 async关键词用于函数上（async函数的返回值是Promise实例对象） await关键子用于async函数当中（await可以得到异步的结果） async function queryData(id) { const ret = await axios.get('/data'); return ret; } queryData.then(ret=>{
promise Eslint sql传参方式 async-await
weixin_44772522的博客
04-29 630
这是一篇学习笔记 各种融合的杂谈 Eslint学习 官网 中文教程 安装Eslint npm i eslint@latest g 配置文件 .eslintrc.json eslint --init eslint test.js 1:5 error 'username' is assigned a value but never used no...
不使用回调函数的ajax请求实现（async和await简化回调函数嵌套）
diebianyi1454的博客
03-27 480
在常规的服务器端程序设计中， 比如说爬虫程序， 发送http请求的过程会使整个执行过程阻塞，直到http请求响应完成代码才会继续执行， 以php为例子 $url = "http://www.google.com.hk"; $result = file_get_contents($url); echo $result; 当代码执行到第二行时，程序便陷入了等待，直到请求完成，...
基于Promise 接口调用方式 ajax fetch axios async/await 前后端交互
十二的博客
03-27 1862
Promise resolve成功状态 reject拒绝状态 后面的then是前面返回promise的处理 前后端交互模式 客户端根据url地址发送请求调用后台接口 后台根据不同的url地址返回不同的数据 接口调用方式： 原生 ajax 基于 jquery 的 ajax fetch axios 异步编程: js中有三种场景 ajax 定时器 事件函数 Promise的相关概念 es6新语法 用来处...
vue 中使用axios + promise封装请求api ——方案（一），小白可以直接拿走复用
BoReFrontEnd的博客
04-28 3268
中文文档地址 https://www.kancloud.cn/yunye/axios/234845 我们在项目搭建好之后，需要请求api获取数据，那么最好的的方法就是用axios，那么axios怎么优雅的使用呢？请继续阅读。 1、安装 使用 npm: $ npm install axios 使用 bower: $ bower install axios 如果项目中已经安装了axios，那...
基于vue 编写一个axios的设置文件 里面设置拦截器 网络请求的公共配置并且举例其他页面js中如何调用post请求
最新发布
05-27
这里我们创建了一个axios实例，设置了API基础路径和请求超时时间，并且添加了请求拦截器和响应拦截器。在请求拦截器中，我们可以添加一些公共请求头信息，比如token等。在响应拦截器中，我们可以对响应数据进行一些...
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

所得皆惊喜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值