Axios在vue項(xiàng)目中的封裝步驟
1. 什么是Axios?
Axios 是一個(gè)基于 promise 的網(wǎng)絡(luò)請(qǐng)求庫(kù),可以用于瀏覽器和 node.js,是一個(gè)第三方插件,第三方異步請(qǐng)求工具庫(kù)
Axios的特點(diǎn):
- 可以運(yùn)行在瀏覽器和node.js環(huán)境中
- 基于promise,可以調(diào)用promiseAPI
- 默認(rèn)發(fā)送的是get請(qǐng)求,默認(rèn)post請(qǐng)求發(fā)送的數(shù)據(jù)格式是JSON
- 除了表單格式數(shù)據(jù),對(duì)請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)可以自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)格式。
- 可以對(duì)請(qǐng)求和響應(yīng)做攔截
2. 回顧Ajax
Ajax的特點(diǎn):
- 異步的JavaScript和XML
- 可以在瀏覽器中運(yùn)行,但是不可以在node.js環(huán)境下運(yùn)行
- 請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)需要手動(dòng)轉(zhuǎn)換格式
- 請(qǐng)求頭也需要手動(dòng)設(shè)置
Ajax創(chuàng)建步驟:
// 1.創(chuàng)建XMLHttpRequest實(shí)例
let xhr = new XMLHttpRequest()
// 2.打開(kāi)一個(gè)連接
xhr.open('請(qǐng)求方式get/post','請(qǐng)求地址')
// 3.發(fā)送請(qǐng)求
// 必要時(shí)還需設(shè)置請(qǐng)求頭格式:JSON/application/x-www-form-urlencoded
xhr.setRequestHeader()
// 必要時(shí)還需轉(zhuǎn)換請(qǐng)求數(shù)據(jù)格式:JSON.stringfy(參數(shù))/Qs.stringfy(參數(shù))
xhr.send(請(qǐng)求參數(shù))
// 4.接收響應(yīng)
xhr.onreadystatechange=function(){
// 判斷:請(qǐng)求是發(fā)送完成和請(qǐng)求是否發(fā)送成功
if(xhr.readyState===4 && xhr.status===200){
// 接收響應(yīng):必要時(shí)還要轉(zhuǎn)換響應(yīng)數(shù)據(jù)的格式 JSON.parse(xhr.response)
console.log(xhr.response);
}
}
3. 回顧Promise
Promise是一種異步編程解決方案。Promise構(gòu)造函數(shù)接收兩個(gè)參數(shù):resolve和reject。resolve作為成功的回調(diào)函數(shù),reject作為失敗的回調(diào)函數(shù)。
// 1.創(chuàng)建promise對(duì)象
let p1=new Promise((resolve,reject)=>{
// resolve,reject是回調(diào)函數(shù)
// resolve函數(shù)是promise對(duì)象最終狀態(tài)為成功狀態(tài)
//reject函數(shù)是promise對(duì)象最終狀態(tài)為失敗狀態(tài)
//非異步
//假設(shè)異步操作執(zhí)行成功,修改promise對(duì)象狀態(tài)為成功狀態(tài)
if(3>2){
resolve('success')
}else{
//假設(shè)異步操作執(zhí)行失敗,修改promise對(duì)象狀態(tài)為失敗狀態(tài)
reject('error')
}
})
//如何提供resolve和reject函數(shù)
//在promise原型里有then和catch
// 1.then方法表示的是成功之后的回調(diào),對(duì)應(yīng)resolve
// 2.catch方法表示的是失敗之后的回調(diào),對(duì)應(yīng)reject
p1.then((res)=>{
console.log(res,'成功回調(diào)')
}).catch((error)=>{
console.log(error,'失敗回調(diào)')
}).finally(()=>{
console.log('最終執(zhí)行')
})
//如果then里面?zhèn)髁藘蓚€(gè)回調(diào)函數(shù),第一個(gè)代表成功之后的回調(diào),第二個(gè)代表失敗之后的回調(diào),分別代表resolve()和reject()
p1.then((res)=>{
console.log(res,'成功')
},(err)=>{
console.log(res,'失敗')
});
4. Vue封裝Axios
Axios是一個(gè)基于promise的HTTP庫(kù),可以用在瀏覽器和node.js中。jQuery中也封裝了ajax機(jī)制,但是僅適用于瀏覽器。
功能特點(diǎn):
- 在瀏覽器和node.js中皆可用
- 自動(dòng)轉(zhuǎn)化請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)格式為JSON數(shù)據(jù)格式
- 可以做攔截請(qǐng)求和響應(yīng)攔截
- 可以調(diào)用Promise的API
- axios默認(rèn)發(fā)送請(qǐng)求為get方式,默認(rèn)數(shù)據(jù)格式為JSON格式
封裝步驟:
在項(xiàng)目中安裝axios:npm i -S axios創(chuàng)建封裝axios的文件夾并導(dǎo)入axios,根據(jù)項(xiàng)目所需創(chuàng)建axios API:
import axios from "axios";
import Qs from 'qs';
let qs= Qs;
// 創(chuàng)建axios實(shí)例對(duì)象
let instance = axios.create({
baseURL:"http://121.199.0.35:8888",
timeout:5000
});
// 請(qǐng)求攔截器
instance.interceptors.request.use(config=>{
if(config.url!=='/user/login'){
config.headers.Authorization='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE2NjQ5MzY4OTksImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNjY1MTA5Njk5LCJuYmYiOjE2NjQ5MzY4OTl9.uLSFoGrqdvZS-3KA1HgjgshUZOqGbMWO5Rpr1yzMCAY';
}
return config
},error=>{
return Promise.reject(error)
});
// 響應(yīng)攔截器 ---對(duì)axios封裝響應(yīng)數(shù)據(jù)做攔截
instance.interceptors.response.use(response=>{
let res=response.data;
return res
},error=>{
return Promise.reject(error)
});
// 封裝get方法
export function get(url,params){
return instance.get(url,{
params,
})
}
//封裝postJSON方法 json數(shù)據(jù)格式 --登錄接口
export function postJSON(url,data){
return instance.post(url,data);
}
// 封裝post方法 表單格式數(shù)據(jù)
export function post(url,data){
return instance.post(url,qs.stringify(data))
}
export default instance
到此這篇關(guān)于Axios在vue項(xiàng)目中的封裝方法的文章就介紹到這了,更多相關(guān)Axios vue封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3+echarts實(shí)現(xiàn)好看的圓角環(huán)形圖
這篇文章主要介紹了vue3+echarts實(shí)現(xiàn)好看的圓角環(huán)形圖效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問(wèn)題
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue實(shí)現(xiàn)日歷表格(element-ui)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷表格(element-ui),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程
這篇文章主要介紹了vue+springboot+element+vue-resource實(shí)現(xiàn)文件上傳教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
關(guān)于Vue.js一些問(wèn)題和思考學(xué)習(xí)筆記(2)
這篇文章主要為大家分享了關(guān)于Vue.js一些問(wèn)題和思考的學(xué)習(xí)筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
Vue實(shí)現(xiàn)導(dǎo)出word文檔的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue如何使用第三方庫(kù)file-saver和html-docx-js實(shí)現(xiàn)導(dǎo)出word文檔的效果,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02

