欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

一,為什么要對(duì)axios進(jìn)行二次封裝?

答:主要是要用到請(qǐng)求攔截器和響應(yīng)攔截器;

請(qǐng)求攔截器:可以在發(fā)請(qǐng)求之前可以處理一些業(yè)務(wù)

響應(yīng)攔截器:當(dāng)服務(wù)器數(shù)據(jù)返回以后,可以處理一些事情

二,axios的二次封裝

2.1 安裝axios

在當(dāng)前的項(xiàng)目路徑下安裝

cnpm install --save axios

安裝成功

2.2 通常情況下,項(xiàng)目都有一個(gè)api文件夾(axios二次封裝的文件夾)

a.創(chuàng)建一個(gè)api文件夾

b.在api文件夾下創(chuàng)建request.js(用于書寫axios二次封裝的代碼)

c.在request.js書寫axios二次封裝的代碼

//對(duì)axios進(jìn)行二次封裝,將剛才下載好的axios導(dǎo)入進(jìn)來(lái)
import axios from "axios";

//1.利用axios對(duì)象的方法create,去創(chuàng)建一個(gè)axios實(shí)例
//2.requests就是axios,只不過稍微配置一下
const requests = axios.create({
	//配置對(duì)象
	//基礎(chǔ)路徑,發(fā)請(qǐng)求的時(shí)候,路徑當(dāng)中會(huì)出現(xiàn)api,不用你手寫
	baseURL:'/api',
	//請(qǐng)求時(shí)間超過5秒
	timeout:5000
});
 //請(qǐng)求攔截器:在發(fā)請(qǐng)求之前,請(qǐng)求攔截器可以檢測(cè)到,可以在請(qǐng)求發(fā)出去之前做一些事情
 requests.interceptors.request.use((config)=>{
 	//config是個(gè)配置對(duì)象,對(duì)象里面有一個(gè)屬性很重要,headers請(qǐng)求頭
 	return config;		
 });
 
 //響應(yīng)攔截器:包含兩個(gè)函數(shù)(一個(gè)是成功返回的函數(shù),一個(gè)是失敗的返回的函數(shù))
 requests.intercetors.response.use((res)=>{
	//成功的回調(diào)函數(shù):服務(wù)器響應(yīng)數(shù)據(jù)回來(lái)以后,響應(yīng)攔截器可以檢測(cè)到,可以做一些事情。
	return res.date;	
},(erroe)=>{
	return promise.reject(new Error('faile'))
});
//對(duì)外暴露requests(axios的二次封裝)
export default requests;

d.對(duì)api進(jìn)行統(tǒng)一管理 (請(qǐng)求的接口比較多,需要統(tǒng)一管理)

1.在api文件夾新建一個(gè)index.js,用于管理接口

2.在index.js書寫代碼

//導(dǎo)入剛才寫好的axios二次封裝的requests
import requests from "./request";
//三級(jí)聯(lián)動(dòng)接口
///api/product/getBaseCategoryList get 無(wú)參數(shù)
//發(fā)請(qǐng)求:axios發(fā)請(qǐng)求返回結(jié)果promise對(duì)象
export const reqCategoryList = ()=>{
	//由于前面配置了基礎(chǔ)路徑,所以不用加/api
	return requests({url:'/product/getBaseCategoryList',method:'get'}
});

3.跨域問題

什么是跨域:協(xié)議,域名,端口號(hào)不同請(qǐng)求,稱之為跨域

例:http://localhost:8000/#/home —前端項(xiàng)目的本地服務(wù)器

http://39.98.123.211 —調(diào)取數(shù)據(jù)的后臺(tái)服務(wù)器

直接調(diào)取后臺(tái)服務(wù)器數(shù)據(jù)的話,會(huì)出現(xiàn)404

4.解決跨域問題(3種:JSONP,CROS和代理)

我們用代理解決,在vue.config.js配置如下代碼

//代理跨域
  devServer:{
    proxy: {
      "/api": {
      //后臺(tái)服務(wù)器地址
        target: "http://39.98.123.211",
       
      }
    }
  }

完成

總結(jié)

到此這篇關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的文章就介紹到這了,更多相關(guān)axios二次封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vuex中this.$store.commit和this.$store.dispatch的基本用法實(shí)例

    vuex中this.$store.commit和this.$store.dispatch的基本用法實(shí)例

    在vue的項(xiàng)目里常常會(huì)遇到父子組件間需要進(jìn)行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • Vue首屏?xí)r間指標(biāo)采集最佳方式詳解

    Vue首屏?xí)r間指標(biāo)采集最佳方式詳解

    這篇文章主要為大家介紹了Vue首屏?xí)r間指標(biāo)采集最佳方式示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • 關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)

    關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)

    這篇文章主要介紹了關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue發(fā)布項(xiàng)目實(shí)例講解

    Vue發(fā)布項(xiàng)目實(shí)例講解

    在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項(xiàng)目的實(shí)例內(nèi)容以及知識(shí)點(diǎn)講解,需要的朋友們參考下。
    2019-07-07
  • 強(qiáng)大Vue.js組件淺析

    強(qiáng)大Vue.js組件淺析

    這篇文章主要為大家介紹了Vue.js組件,組件是Vue.js最強(qiáng)大的功能之一,感興趣的小伙伴們可以參考一下
    2016-09-09
  • Vue 表單輸入綁定v-model

    Vue 表單輸入綁定v-model

    這篇文章主要介紹了Vue 表單輸入綁定v-model,v-model指定可以實(shí)現(xiàn)表單值與屬性的雙向綁定。即表單元素中更改了值會(huì)自動(dòng)的更新屬性中的值,屬性中的值更新了會(huì)自動(dòng)更新表單中的值 ,下面一起進(jìn)入文章來(lái)哦姐文章詳情內(nèi)容
    2021-10-10
  • Vue中splice()方法對(duì)數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)

    Vue中splice()方法對(duì)數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)

    vue中對(duì)數(shù)組的元素進(jìn)行刪除,以前一直以為這個(gè)方法是vue中特有的,后來(lái)百度之后才知道原來(lái)是js的一個(gè)寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對(duì)數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)方法,需要的朋友可以參考下
    2023-05-05
  • Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解

    Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解

    這篇文章主要為大家介紹了Vue自定義指令實(shí)現(xiàn)點(diǎn)擊右鍵彈出菜單示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • vue項(xiàng)目中input輸入框輸入不了值問題及解決

    vue項(xiàng)目中input輸入框輸入不了值問題及解決

    這篇文章主要介紹了vue項(xiàng)目中input輸入框輸入不了值問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue style屬性設(shè)置背景圖片的相對(duì)路徑無(wú)效的解決

    vue style屬性設(shè)置背景圖片的相對(duì)路徑無(wú)效的解決

    這篇文章主要介紹了vue style屬性設(shè)置背景圖片的相對(duì)路徑無(wú)效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評(píng)論