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