axios二次封裝的詳細過程與跨域問題
一,為什么要對axios進行二次封裝?
答:主要是要用到請求攔截器和響應攔截器;
請求攔截器:可以在發(fā)請求之前可以處理一些業(yè)務
響應攔截器:當服務器數據返回以后,可以處理一些事情
二,axios的二次封裝
2.1 安裝axios
在當前的項目路徑下安裝
cnpm install --save axios
安裝成功

2.2 通常情況下,項目都有一個api文件夾(axios二次封裝的文件夾)
a.創(chuàng)建一個api文件夾
b.在api文件夾下創(chuàng)建request.js(用于書寫axios二次封裝的代碼)

c.在request.js書寫axios二次封裝的代碼
//對axios進行二次封裝,將剛才下載好的axios導入進來
import axios from "axios";
//1.利用axios對象的方法create,去創(chuàng)建一個axios實例
//2.requests就是axios,只不過稍微配置一下
const requests = axios.create({
//配置對象
//基礎路徑,發(fā)請求的時候,路徑當中會出現api,不用你手寫
baseURL:'/api',
//請求時間超過5秒
timeout:5000
});
//請求攔截器:在發(fā)請求之前,請求攔截器可以檢測到,可以在請求發(fā)出去之前做一些事情
requests.interceptors.request.use((config)=>{
//config是個配置對象,對象里面有一個屬性很重要,headers請求頭
return config;
});
//響應攔截器:包含兩個函數(一個是成功返回的函數,一個是失敗的返回的函數)
requests.intercetors.response.use((res)=>{
//成功的回調函數:服務器響應數據回來以后,響應攔截器可以檢測到,可以做一些事情。
return res.date;
},(erroe)=>{
return promise.reject(new Error('faile'))
});
//對外暴露requests(axios的二次封裝)
export default requests;
d.對api進行統一管理 (請求的接口比較多,需要統一管理)
1.在api文件夾新建一個index.js,用于管理接口
2.在index.js書寫代碼
//導入剛才寫好的axios二次封裝的requests
import requests from "./request";
//三級聯動接口
///api/product/getBaseCategoryList get 無參數
//發(fā)請求:axios發(fā)請求返回結果promise對象
export const reqCategoryList = ()=>{
//由于前面配置了基礎路徑,所以不用加/api
return requests({url:'/product/getBaseCategoryList',method:'get'}
});
3.跨域問題
什么是跨域:協議,域名,端口號不同請求,稱之為跨域
例:http://localhost:8000/#/home —前端項目的本地服務器
http://39.98.123.211 —調取數據的后臺服務器
直接調取后臺服務器數據的話,會出現404
4.解決跨域問題(3種:JSONP,CROS和代理)
我們用代理解決,在vue.config.js配置如下代碼

//代理跨域
devServer:{
proxy: {
"/api": {
//后臺服務器地址
target: "http://39.98.123.211",
}
}
}
完成
總結
到此這篇關于axios二次封裝的詳細過程與跨域問題的文章就介紹到這了,更多相關axios二次封裝內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
easycom模式開發(fā)UNI-APP組件調用必須掌握的實用技巧
uni-app基于VUE開發(fā),通常組件的使用都是先安裝,然后全局或者局部引入,注冊,今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調用必須掌握的實用技巧,需要的朋友一起看看吧2021-08-08
詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題
這篇文章主要介紹了詳解element-ui級聯菜單(城市三級聯動菜單)和回顯問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-10-10

