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

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

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

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

<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="http://9i0i.com/pic.php?p=./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>

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