JavaScript使用Promise封装Axios进行高效开发

 更新时间:2023年05月16日 09:58:20   作者:码上编程  
这篇文章主要介绍了JavaScript使用Promise封装Axios进行高效开发,Axios是一个基于Promise的HTTP库,它可以帮助我们更方便地发起HTTP请求,并且提供了许多高级功能,感兴趣的同学可以参考下文

一、为什么要使用promise封装

原生的axios书写是这样的:

axios({
  url: 接口地址,
  method:请求方法,
  data:携带数据,
}).then(res=>{
  //请求接口成功的逻辑
}).catch(err=>{
  //请求接口失败的逻辑
})

出现了这些问题:

(1)重复的地方特别多,显得代码不够优雅。

(2)后期一旦不使用axios,改用其它第三方访问后端插件,一个个文件去修改,累死宝宝了。

(3)若是axios.then()里面在嵌套多次访问后台请求,业务变得极其复杂,且代码不利于查看。

ES6中的promise横空出世,解决了上面的痛点。axios本身也是一个promise,promise的出现就是为了解决地狱回调的问题(地狱回调至在请求后台成功之后不断嵌套多次异步请求),这就是为什么使用promise封装axios请求。

二、如何封装以及使用

本项目使用的工具以及知识点: vue3+vite+axios+es6(promise)+es8(async,await),薄弱的地方建议先自学。

(1) vite搭建vue3项目控制台所需指令

npm init @vitejs/app
//输入项目名称,选择vue
cd ./项目名称
npm i        //安装依赖
npm run dev     //运行项目
npm install  axios     //安装axios依赖 

(2)request.js 配置axios

import axios from 'axios'
const baseURL='http://localhost:8888/lostFound'   //后台接口的域名或者服务器地址
//请求拦截,会自动在axios请求后端的时候添加请求头,并将token添加到请求里面
const service =axios.interceptors.request.use(config => {
    if (localStorage.getItem('token')) {
        config.headers.token = localStorage.getItem('token');
    }
    return config;
}, error => { return Promise.reject(error) })
//响应拦截,将后端传回来的token放在localStorage缓存里
service.interceptors.response.use(response => {
    localStorage.setItem("token", response.headers.token);
    return response;
})
export default service

(3)http.js中封装axios

import service from './request'
//封装axios请求
const myRequest = options => {
  return new Promise((resolve, reject) => {
    service({
      url: options.url,
      method: options.method || 'GET',
      data: options.data || {},
      params: options.params || {}
    }).then(res => resolve(res))  //请求成功
      .catch(err => reject(err))  //请求失败
  })
}
export default myRequest

(4)在App.vue使用

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { myRequest } from './utils/http'
import { onMounted } from 'vue'
/**
 * await后面跟一个promise,await可以省略很多.then的书写,让promise更加简洁优雅,await要在async函数体内使用
 */  
//get不携带参数获取数据
const getWithNoParameters = async () => {
  let res = await myRequest({ url: '/selectAllCategories'})
  console.log('get不携带参数',res)
}
//get携带参数
const getWithParameters = async ()=>{
  let params={
    id:10
  }
  let res=await myRequest({url:'/selectFoundDetailById',params})
  console.log('get携带参数',res)
}
//post请求方式
const post = async()=>{
  let formData=new FormData()
  formData.append('sno','1')
  formData.append('password','1')
  let res=await myRequest({url:'/login',method:'post',data:formData})
  console.log('post:',res)
}
//生命周期钩子函数
onMounted(() => {
  getWithNoParameters()
  getWithParameters()
  post()
})
</script>
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

(4)运行结果:

(5)分析:

一个接口功能省下10行代码,一个项目假设有40个接口,你就能省下400行冗余代码了,感受到了精益求精的工匠精神。

三、拓展

//uniapp中也可以这样封装后端请求api
export myRequest= options =>{
  return new Promise((resolve,reject)=>{
    uni.request({
      url: options.url,
      method:options.method || 'GET',
      data: options.data || {},
      success: res=>{
        //请求后台成功
        resolve(res)
      },
      fail: err=>{
      	//请求后台失败
        reject(err)
      }
    }
    })
  })
}
//微信小程序中也可以这样封装后端请求api
export myRequest= options=>{
  return new Promise((resolve,reject)=>{
    wx.request({
      url: options.url,
      method:options.method || 'GET',
      data: options.data || {},
      success(res){
        //请求后台成功
        resolve(res)
      },
      fail(err){
      	//请求后台失败
        reject(err)
      }
    }
    })
  })
}

到此这篇关于JavaScript使用Promise封装Axios进行高效开发的文章就介绍到这了,更多相关JS使用Promise封装Axios内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解用Webpack与Babel配置ES6开发环境

    详解用Webpack与Babel配置ES6开发环境

    这篇文章主要介绍了详解用Webpack与Babel配置ES6开发环境,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JavaScript实现像素鸟小游戏的详细流程

    JavaScript实现像素鸟小游戏的详细流程

    最近通过javascript这门语言,然后结合html的来写一个简单的小游戏 ,这篇文章主要给大家介绍了关于JavaScript实现像素鸟小游戏的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Javascript 实现匿名递归的实例代码

    Javascript 实现匿名递归的实例代码

    本篇文章主要介绍了Javascript 实现匿名递归的实例代码,利用 arguments.callee 来实现匿名递归的方式。有兴趣的可以了解一下
    2017-05-05
  • JavaScript中关联原型链属性特性

    JavaScript中关联原型链属性特性

    这篇文章主要介绍了JavaScript中关联原型链属性特性的相关资料,需要的朋友可以参考下
    2016-02-02
  • 微信小程序实现点赞业务

    微信小程序实现点赞业务

    这篇文章主要为大家详细介绍了微信小程序实现点赞业务,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • js实现网页五子棋进阶版

    js实现网页五子棋进阶版

    这篇文章主要为大家详细介绍了js实现网页五子棋进阶版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 原生JS实现《别踩白块》游戏(兼容IE)

    原生JS实现《别踩白块》游戏(兼容IE)

    本文主要介绍了原生JS实现《别踩白块》游戏(兼容IE)的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS实现太极旋转思路分析

    JS实现太极旋转思路分析

    本文主要对JS实现太极旋转的思路进行分析,步骤清晰,简短的文字,深入的理解。需要的朋友可以看下
    2016-12-12
  • js加解密 脚本解密

    js加解密 脚本解密

    利用js异或算法实现脚本加解密的代码
    2008-02-02
  • 根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)

    根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)

    这篇文章主要介绍了根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本),需要的朋友可以参考下
    2015-09-09

最新评论