目錄

• 一、為什么要使用promise封裝
• 二、如何封裝以及使用
• 三、拓展

一、為什么要使用promise封裝

原生的axios書寫是這樣的：

axios({  url: 接口地址,  method:請(qǐng)求方法,  data:攜帶數(shù)據(jù),}).then(res=>{  //請(qǐng)求接口成功的邏輯}).catch(err=>{  //請(qǐng)求接口失敗的邏輯})

出現(xiàn)了這些問(wèn)題：

（1）重復(fù)的地方特別多，顯得代碼不夠優(yōu)雅。

(2)后期一旦不使用axios，改用其它第三方訪問(wèn)后端插件，一個(gè)個(gè)文件去修改，累死寶寶了。

(3)若是axios.then()里面在嵌套多次訪問(wèn)后臺(tái)請(qǐng)求，業(yè)務(wù)變得極其復(fù)雜，且代碼不利于查看。

ES6中的promise橫空出世，解決了上面的痛點(diǎn)。axios本身也是一個(gè)promise，promise的出現(xiàn)就是為了解決地獄回調(diào)的問(wèn)題(地獄回調(diào)至在請(qǐng)求后臺(tái)成功之后不斷嵌套多次異步請(qǐng)求)，這就是為什么使用promise封裝axios請(qǐng)求。

二、如何封裝以及使用

本項(xiàng)目使用的工具以及知識(shí)點(diǎn): vue3+vite+axios+es6(promise)+es8(async，await)，薄弱的地方建議先自學(xué)。

(1) vite搭建vue3項(xiàng)目控制臺(tái)所需指令

npm init @vitejs/app
//輸入項(xiàng)目名稱，選擇vue
cd ./項(xiàng)目名稱
npm i //安裝依賴
npm run dev //運(yùn)行項(xiàng)目
npm install axios //安裝axios依賴

(2)request.js 配置axios

import axios from "axios"const baseURL="http://localhost:8888/lostFound"   //后臺(tái)接口的域名或者服務(wù)器地址//請(qǐng)求攔截，會(huì)自動(dòng)在axios請(qǐng)求后端的時(shí)候添加請(qǐng)求頭，并將token添加到請(qǐng)求里面const service =axios.interceptors.request.use(config => {    if (localStorage.getItem("token")) {config.headers.token = localStorage.getItem("token");    }    return config;}, error => { return Promise.reject(error) })//響應(yīng)攔截，將后端傳回來(lái)的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"http://封裝axios請(qǐng)求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))  //請(qǐng)求成功      .catch(err => reject(err))  //請(qǐng)求失敗  })}export default myRequest

(4)在App.vue使用

<script setup>import HelloWorld from "./components/HelloWorld.vue"import { myRequest } from "./utils/http"import { onMounted } from "vue"/** * await后面跟一個(gè)promise，await可以省略很多.then的書寫，讓promise更加簡(jiǎn)潔優(yōu)雅,await要在async函數(shù)體內(nèi)使用 */  //get不攜帶參數(shù)獲取數(shù)據(jù)const getWithNoParameters = async () => {  let res = await myRequest({ url: "/selectAllCategories"})  console.log("get不攜帶參數(shù)",res)}//get攜帶參數(shù)const getWithParameters = async ()=>{  let params={    id:10  }  let res=await myRequest({url:"/selectFoundDetailById",params})  console.log("get攜帶參數(shù)",res)}//post請(qǐng)求方式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)}//生命周期鉤子函數(shù)onMounted(() => {  getWithNoParameters()  getWithParameters()  post()})</script><template>  <img 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)運(yùn)行結(jié)果：

(5)分析：

一個(gè)接口功能省下10行代碼，一個(gè)項(xiàng)目假設(shè)有40個(gè)接口，你就能省下400行冗余代碼了，感受到了精益求精的工匠精神。

三、拓展

//uniapp中也可以這樣封裝后端請(qǐng)求apiexport myRequest= options =>{  return new Promise((resolve,reject)=>{    uni.request({      url: options.url,      method:options.method || "GET",      data: options.data || {},      success: res=>{//請(qǐng)求后臺(tái)成功resolve(res)      },      fail: err=>{      	//請(qǐng)求后臺(tái)失敗reject(err)      }    }    })  })}//微信小程序中也可以這樣封裝后端請(qǐng)求apiexport myRequest= options=>{  return new Promise((resolve,reject)=>{    wx.request({      url: options.url,      method:options.method || "GET",      data: options.data || {},      success(res){//請(qǐng)求后臺(tái)成功resolve(res)      },      fail(err){      	//請(qǐng)求后臺(tái)失敗reject(err)      }    }    })  })}

到此這篇關(guān)于JavaScript使用Promise封裝Axios進(jìn)行高效開發(fā)的文章就介紹到這了,更多相關(guān)JS使用Promise封裝Axios內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！