Promise、axios 个人学习心得

于 2021-03-10 17:46:40 发布
阅读量818 收藏 6
点赞数
分类专栏： 新手 vue 文章标签： axios promise vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zcylxzyh/article/details/114526262
版权
本文介绍了Promise的基本概念和使用，包括Promise的创建、解决与拒绝、简写形式以及Promise.all方法。接着详细探讨了axios的安装、使用、并发请求处理、全局配置以及如何进行网络模块的封装，推荐了一种灵活的封装方式。最后，讨论了axios的拦截器在请求和响应处理中的应用，以提高代码的可维护性和统一性。

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

Promise、axios

前言

有的时候因为需要考虑路径的问题，因此我们可以给一些路径起一下别名：（extensions中有的在import的时候就不用加后缀了）
在这里插入图片描述
在这里插入图片描述
起别名之后使用import是可以直接用别名的
在这里插入图片描述
如果在html属性中src这里需要加上 ~ 符号才相当于使用了别名
在这里插入图片描述

1、Promise

1.1 什么是Promise

在这里插入图片描述
在这里插入图片描述

1.2 基本使用

  • new Promise的时候是相当于先保存了一些状态信息，保存之后执行我们传入的函数（要传递两个参数）

  • 在执行传入的回调函数的时候会传入两个参数，resolve,reject本身又是函数

  • Promise分离了异步请求和处理数据的代码

  • 成功的时候调用resolve
    一旦调用resolve的时候它就会去调用then ,then(下一步)函数的里面也是一个函数,这个函数里是我需要处理的事情。

  • 如果多次嵌套就可以return一个Promise继续进行操作

  • 失败的时候调用reject
    一旦调用reject的时候它就会去调用catch

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    //参数：resolve,reject本身又是函数
    /* 
        成功的时候调用resolve
        一旦调用resolve的时候它就会去调用then ,
        then(下一步)函数的里面也是一个函数,这个函数里是我需要处理的事情
        如果多次嵌套就可以return一个Promise继续进行操作

        失败的时候调用reject
        一旦调用reject的时候它就会去调用catch ,
    */
    /*
        new Promise的时候是相当于先保存了一些状态信息，保存之后执行我们传入的函数（要传递两个参数）
        在执行传入的回调函数的时候会传入两个参数，resolve,reject本身又是函数
        Promise分离了异步请求和处理数据的代码
    */
    new Promise((resolve, reject) => {
        //第一次请求的代码
        setTimeout((data) => {
            resolve('bbb')
        }, 1000)
    }).then((data) => {
        //第一次请求拿到结果的处理代码
        console.log(data);
        return new Promise((resolve, reject) => {
            // 第二次请求的代码
            setTimeout(() => {
               // resolve()
               reject('aaa')
            }, 1000);
        })
    }).then(() => {
        //第二次请求拿到结果的处理代码
        console.log('hello');
    }).catch((err) => {
        //第二次请求失败处理代码
        console.log(err);
    })
</script>

</html>
1.3 Promise简写

在这里插入图片描述

1.4 Promise all方法

只有在里面的多个异步请求都请求成功的时候才去执行then，参数results是一个数组，数组中：0是第一个请求的结果，1是第二个请求的结果，以此类推
在这里插入图片描述

2、axios

在这里插入图片描述
在这里插入图片描述

2.1 安装axios
npm i axios -S
2.2 使用：在哪里使用就在那里导入
import Vue from 'vue'
import App from './App'
//1、导入axios
import axios from 'axios'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
//2、使用
axios({
  url:'http://123.207.32.32:8000/home/multidata',
  methods:'get'
}).then(res =>{
  console.log(res)
})

axios({
  url:'http://123.207.32.32:8000/home/data',
  methods:'get',
  //专门针对get请求参数拼接
  params:{
    type:'pop',
    page: 1
  }
}).then(res =>{
  console.log(res)
})

结果:
在这里插入图片描述

2.3 axios发送并发请求

在这里插入图片描述

//axios发送并发请求
axios.all([axios({
   url: 'http://123.207.32.32:8000/home/multidata'
   }
), axios(
  {
    url: 'http://123.207.32.32:8000/home/data',
    params: {
      type: 'sell',
      page: 1
    }
  }
)]).then(resules => {
  console.log(resules)
})

结果：
在这里插入图片描述

2.4 全局配置

在这里插入图片描述

//全局配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.all([axios({
   url: '/home/multidata'
   }
), axios(
  {
    url: '/home/data',
    params: {
      type: 'sell',
      page: 1
    }
  }
)]).then(resules => {
  console.log(resules)
})

结果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意：get和params对应，post和data对应

2.5 axios的实例

在这里插入图片描述

//创建对应的axios的实例
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

instance1({
  url:'/home/multidata'
}).then(res => {
  console.log(res)
})

instance1({
  url:'/home/data',
  params:{
    type:'pop',
    page: 1
  }
}).then(res => {
  console.log(res)
})

结果：
在这里插入图片描述

2.6 网络模块封装

为了防止以后在更换第三方库的时候大量的操作，我们在使用第三方库的时候将它封装一下，这样在以后需要改的时候就只要改我们封装的地方就可以了
新建network文件夹和request.js文件
在这里插入图片描述

第一种封装方式：

request.js

import axios from 'axios'
//可以向外暴露多个不同的实例，request就是一个实例

//第一种封装：success和failure是两个函数（回调函数），负责把获取到的结果给调用者传出去，在外面处理结果--回调出去（回调函数）
export function request(config,success,failure){
    //1、创建axios的实例
    const instance = axios.create({
        baseURL:'http://123.207.32.32:8000',
        timeout: 5000
    })
    //发送真正的网络请求
    instance(config).then(res => {
        success(res)
    }).catch(err => {
        failure(err)
    })
}

使用：
main.js添加

//5、使用封装的request模块
import {request} from './network/request'

//5.1 第一种封装
request({
  url: '/home/multidata'
}, res=>{
  console.log(res);
},err =>{
  console.log(err);
})

结果：
在这里插入图片描述

第二种封装方式：

request.js

import axios from 'axios'
//可以向外暴露多个不同的实例，request就是一个实例
//第二种封装：
export function request(config) {
    //1、创建axios的实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    //发送真正的网络请求
    instance(config.baseConfig).then(res =>{
        config.success(res)
    }).catch(err =>{
        config.failure(err)
    })
}

使用
main.js

//5.2 第二种封装 相当于把success和failure都放到了config中，并且在config中定义了baseConfig用于提供类似url之类的配置信息
request({
  baseConfig:{
    url: '/home/multidata'
  },
  success:function(res){
    console.log(res);
  },
  failure:function(err){
    console.log(err);
  }
})

结果：
在这里插入图片描述

推荐封装方式：

request.js

import axios from 'axios'
//可以向外暴露多个不同的实例，request就是一个实例
// 推荐方式：
export function request(config) {
    return new Promise((resolve,rejece) =>{
     //1、创建axios的实例
     const instance = axios.create({
         baseURL: 'http://123.207.32.32:8000',
         timeout: 5000
     })
     //发送真正的网络请求
     instance(config).then(res =>{
         resolve(res)
     }).catch(err =>{
         rejece(err)
     })
    })
 }

使用：
main.js

//5.3 推荐形式
request({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

结果：
在这里插入图片描述

最终方式

因为本身创建的axios就是一个Promise因此可以直接返回，使用方式不变，封装方式改为：
request.js

import axios from 'axios'
//可以向外暴露多个不同的实例，request就是一个实例

export function request(config) { 
     //1、创建axios的实例
     const instance = axios.create({
         baseURL: 'http://123.207.32.32:8000',
         timeout: 5000
     })
     //发送真正的网络请求
     return instance(config)
 }
2.7 axios拦截器的使用

在这里插入图片描述
请求拦截用处：
在这里插入图片描述
request.js中添加

import axios from 'axios'
//可以向外暴露多个不同的实例，request就是一个实例

export function request(config) { 
     //1、创建axios的实例
     const instance = axios.create({
         baseURL: 'http://123.207.32.32:8000',
         timeout: 5000
     })
     //2、axios的拦截器 
     instance.interceptors.request.use(config => {
         //拦截之后要记得返回出去
        console.log(config);
        return config
     },err =>{
         console.log(err)
     })
     //3、发送真正的网络请求
     return instance(config)
 }

结果：
在这里插入图片描述
响应拦截：可以帮助我们过滤掉不需要的属性
request.js

import axios from 'axios'
//可以向外暴露多个不同的实例，request就是一个实例

export function request(config) { 
     //1、创建axios的实例
     const instance = axios.create({
         baseURL: 'http://123.207.32.32:8000',
         timeout: 5000
     })
     //2、axios的拦截器 
     //2.1 请求拦截 发出请求的时候拦截
     instance.interceptors.request.use(config => {
         //拦截之后要记得返回出去
        console.log(config);
        return config
     },err =>{
         console.log(err)
     })
     //2.2 响应拦截 已经拿到了结果之后拦截 
     instance.interceptors.response.use(res =>{
        console.log(res);
        //这里只返回res中的data
        return res.data
     },err => {
        console.log(err);
     })
     //3、发送真正的网络请求
     return instance(config)
 }

结果：
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值