最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

axios二次封裝的詳細(xì)過程與跨域問題

 更新時間:2022年09月06日 11:13:54   作者:生哥編程  
通常我們的項目會越做越大,頁面也會越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護,下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的相關(guān)資料,需要的朋友可以參考下

一,為什么要對axios進行二次封裝?

答:主要是要用到請求攔截器和響應(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進行二次封裝,將剛才下載好的axios導(dǎo)入進來
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進行統(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)文章

  • easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實用技巧

    easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實用技巧

    uni-app基于VUE開發(fā),通常組件的使用都是先安裝,然后全局或者局部引入,注冊,今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實用技巧,需要的朋友一起看看吧
    2021-08-08
  • Vue非父子組件通信詳解

    Vue非父子組件通信詳解

    這篇文章主要為大家詳細(xì)介紹了Vue非父子組件通信的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • vue better-scroll插件使用詳解

    vue better-scroll插件使用詳解

    本篇文章主要介紹了vue better-scroll插件使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • Vue pinia模塊化全局注冊詳解

    Vue pinia模塊化全局注冊詳解

    這篇文章主要介紹了Vue pinia模塊化全局注冊,Pinia是Vue.js團隊成員專門為Vue開發(fā)的一個全新的狀態(tài)管理庫,并且已經(jīng)被納入官方github
    2023-02-02
  • Vue2.X 通過AJAX動態(tài)更新數(shù)據(jù)

    Vue2.X 通過AJAX動態(tài)更新數(shù)據(jù)

    這篇文章主要介紹了Vue2.X 通過AJAX動態(tài)更新數(shù)據(jù)的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-07-07
  • 詳解.vue文件中style標(biāo)簽的幾個標(biāo)識符

    詳解.vue文件中style標(biāo)簽的幾個標(biāo)識符

    這篇文章主要介紹了詳解.vue文件中style標(biāo)簽的幾個標(biāo)識符,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • 用Vue寫一個分頁器的示例代碼

    用Vue寫一個分頁器的示例代碼

    本篇文章主要介紹了用Vue寫一個分頁器的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • 詳解element-ui級聯(lián)菜單(城市三級聯(lián)動菜單)和回顯問題

    詳解element-ui級聯(lián)菜單(城市三級聯(lián)動菜單)和回顯問題

    這篇文章主要介紹了詳解element-ui級聯(lián)菜單(城市三級聯(lián)動菜單)和回顯問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • VsCode里的Vue模板的實現(xiàn)

    VsCode里的Vue模板的實現(xiàn)

    這篇文章主要介紹了VsCode里的Vue模板的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • 詳解vue-router和vue-cli以及組件之間的傳值

    詳解vue-router和vue-cli以及組件之間的傳值

    這篇文章主要介紹了詳解vue-router和vue-cli以及組件之間的傳值,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07

最新評論

武山县| 贵德县| 即墨市| 洞头县| 安乡县| 高台县| 深水埗区| 白水县| 措美县| 木里| 马鞍山市| 红安县| 通河县| 梓潼县| 同德县| 宜宾市| 营山县| 贡觉县| 原平市| 日照市| 四平市| 西盟| 上思县| 卢氏县| 兰溪市| 淮阳县| 定兴县| 治县。| 福安市| 星子县| 波密县| 缙云县| 赣榆县| 内江市| 大渡口区| 三都| 康保县| 崇仁县| 石阡县| 秭归县| 错那县|