axios二次封裝的詳細(xì)過程與跨域問題
一,為什么要對axios進(jìn)行二次封裝?
答:主要是要用到請求攔截器和響應(yīng)攔截器;
請求攔截器:可以在發(fā)請求之前可以處理一些業(yè)務(wù)
響應(yīng)攔截器:當(dāng)服務(wù)器數(shù)據(jù)返回以后,可以處理一些事情
二,axios的二次封裝
2.1 安裝axios
在當(dāng)前的項目路徑下安裝
cnpm install --save axios
安裝成功
2.2 通常情況下,項目都有一個api文件夾(axios二次封裝的文件夾)
a.創(chuàng)建一個api文件夾
b.在api文件夾下創(chuàng)建request.js(用于書寫axios二次封裝的代碼)
c.在request.js書寫axios二次封裝的代碼
//對axios進(jìn)行二次封裝,將剛才下載好的axios導(dǎo)入進(jìn)來 import axios from "axios"; //1.利用axios對象的方法create,去創(chuàng)建一個axios實例 //2.requests就是axios,只不過稍微配置一下 const requests = axios.create({ //配置對象 //基礎(chǔ)路徑,發(fā)請求的時候,路徑當(dāng)中會出現(xiàn)api,不用你手寫 baseURL:'/api', //請求時間超過5秒 timeout:5000 }); //請求攔截器:在發(fā)請求之前,請求攔截器可以檢測到,可以在請求發(fā)出去之前做一些事情 requests.interceptors.request.use((config)=>{ //config是個配置對象,對象里面有一個屬性很重要,headers請求頭 return config; }); //響應(yīng)攔截器:包含兩個函數(shù)(一個是成功返回的函數(shù),一個是失敗的返回的函數(shù)) requests.intercetors.response.use((res)=>{ //成功的回調(diào)函數(shù):服務(wù)器響應(yīng)數(shù)據(jù)回來以后,響應(yīng)攔截器可以檢測到,可以做一些事情。 return res.date; },(erroe)=>{ return promise.reject(new Error('faile')) }); //對外暴露requests(axios的二次封裝) export default requests;
d.對api進(jìn)行統(tǒng)一管理 (請求的接口比較多,需要統(tǒng)一管理)
1.在api文件夾新建一個index.js,用于管理接口
2.在index.js書寫代碼
//導(dǎo)入剛才寫好的axios二次封裝的requests import requests from "./request"; //三級聯(lián)動接口 ///api/product/getBaseCategoryList get 無參數(shù) //發(fā)請求:axios發(fā)請求返回結(jié)果promise對象 export const reqCategoryList = ()=>{ //由于前面配置了基礎(chǔ)路徑,所以不用加/api return requests({url:'/product/getBaseCategoryList',method:'get'} });
3.跨域問題
什么是跨域:協(xié)議,域名,端口號不同請求,稱之為跨域
例:http://localhost:8000/#/home —前端項目的本地服務(wù)器
http://39.98.123.211 —調(diào)取數(shù)據(jù)的后臺服務(wù)器
直接調(diào)取后臺服務(wù)器數(shù)據(jù)的話,會出現(xiàn)404
4.解決跨域問題(3種:JSONP,CROS和代理)
我們用代理解決,在vue.config.js配置如下代碼
//代理跨域 devServer:{ proxy: { "/api": { //后臺服務(wù)器地址 target: "http://39.98.123.211", } } }
完成
總結(jié)
到此這篇關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的文章就介紹到這了,更多相關(guān)axios二次封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vuex中this.$store.commit和this.$store.dispatch的基本用法實例
在vue的項目里常常會遇到父子組件間需要進(jìn)行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下2023-01-01關(guān)于element-ui中el-form自定義驗證(調(diào)用后端接口)
這篇文章主要介紹了關(guān)于element-ui中el-form自定義驗證(調(diào)用后端接口),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作的實現(xiàn)
vue中對數(shù)組的元素進(jìn)行刪除,以前一直以為這個方法是vue中特有的,后來百度之后才知道原來是js的一個寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對數(shù)組進(jìn)行增刪改等操作的實現(xiàn)方法,需要的朋友可以參考下2023-05-05vue style屬性設(shè)置背景圖片的相對路徑無效的解決
這篇文章主要介紹了vue style屬性設(shè)置背景圖片的相對路徑無效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10