Promise封装Axios进行高效开发

原生的axios书写是这样的：

1 2 3 4 5 6 7 8 9

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

出现了这些问题：

（1）重复的地方特别多，显得代码不够优雅。

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

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

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

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

(2)request.js 配置axios

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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)xxx.js中封装axios

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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使用

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

<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>

uni-app和小程序中 

//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)
      }
    }
    })
  })
}