久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

JavaScript使用Promise封裝Axios進(jìn)行高效開(kāi)發(fā)

瀏覽:147日期:2022-06-10 13:32:34
目錄
  • 一、為什么要使用promise封裝
  • 二、如何封裝以及使用
  • 三、拓展

一、為什么要使用promise封裝

原生的axios書(shū)寫(xiě)是這樣的:

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的書(shū)寫(xiě),讓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)行高效開(kāi)發(fā)的文章就介紹到這了,更多相關(guān)JS使用Promise封裝Axios內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持!

標(biāo)簽: JavaScript
主站蜘蛛池模板: 蕲春县| 宿迁市| 三穗县| 平果县| 报价| 苍山县| 固原市| 育儿| 鸡西市| 北宁市| 朔州市| 顺义区| 曲麻莱县| 布拖县| 遂平县| 邳州市| 开远市| 繁昌县| 长武县| 新干县| 安宁市| 抚松县| 台江县| 阿尔山市| 炉霍县| 深泽县| 武川县| 鲁山县| 平武县| 商南县| 米林县| 海晏县| 阿拉善右旗| 西乌珠穆沁旗| 阿坝县| 周口市| 霍山县| 广宗县| 旺苍县| 怀安县| 鹤山市|