axios封裝與傳參示例詳解
1.開(kāi)發(fā)環(huán)境 vue+typescript
2.電腦系統(tǒng) windows10專業(yè)版
3.在開(kāi)發(fā)的過(guò)程中,我們會(huì)經(jīng)常使用到 axios進(jìn)行數(shù)據(jù)的交互,下面我來(lái)說(shuō)一下,axios封裝和傳參!
4-1:下面結(jié)構(gòu)如下:
4-2:request.js代碼如下:
import axios from 'axios' import qs from 'qs' axios.defaults.timeout = 2000000; //響應(yīng)時(shí)間 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //配置請(qǐng)求頭 // axios.defaults.baseURL = 'http://192.168.137.208:3000/'; //配置接口地址 //POST傳參序列化(添加請(qǐng)求攔截器) axios.interceptors.request.use((config) => { //在發(fā)送請(qǐng)求之前做某件事 // config.headers.Accept="appliaction/json,text/plan"; if(config.method === 'post'){ config.data = qs.stringify(config.data); } return config; },(error) =>{ console.log('錯(cuò)誤的傳參') return Promise.reject(error); }); // axios.interceptors.response.use((res) => { // //對(duì)響應(yīng)數(shù)據(jù)做些事 // if (!res.data) { // return Promise.resolve(res); // } // return res; // }, (error) => { // console.log(error); // console.log('網(wǎng)絡(luò)異常') // return Promise.reject(error); // }); //返回狀態(tài)判斷(添加響應(yīng)攔截器) axios.interceptors.response.use((res) =>{ //對(duì)響應(yīng)數(shù)據(jù)做些事 if(!res.data.success){ return Promise.resolve(res); } return res; }, (error) => { console.log('網(wǎng)絡(luò)異常') return Promise.reject(error); }); //返回一個(gè)Promise(發(fā)送post請(qǐng)求) export function fetchPost(url,param) { return new Promise((resolve, reject) => { axios.post(url,param) .then(response => { resolve(response); }, err => { reject(err); }) .catch((error) => { reject(error) }) }) } // 返回一個(gè)Promise(發(fā)送get請(qǐng)求) export function fetchGet(url,param) { return new Promise((resolve, reject) => { axios.get(url,{params:param}) .then(response => { resolve(response) }, err => { reject(err) }) .catch((error) => { reject(error) }) }) } export default { fetchPost, fetchGet, }
//注意:請(qǐng)求頭的配置,決定了傳參的方法和格式,請(qǐng)求頭的配置至關(guān)重要
5.SheBei.ts代碼如下:
import {fetchPost,fetchGet} from '@/utils/request' export function feng(feng){ return fetchPost('/feng',feng); }
6.Home.vue請(qǐng)求代碼如下:
mounted(){ let a:any={ "name":"111", "pass":"000" } feng(a).then((res)=>{ console.log(res); }) }
7.效果如下:
8.在node.js中輸入如下:
//可以看到,接受到了前端傳過(guò)來(lái)的參數(shù)!
9.參數(shù)的傳遞取決于,request.ts中請(qǐng)求頭的配置!
10.請(qǐng)求頭配置如下:
--第一種 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //請(qǐng)求體中的數(shù)據(jù)會(huì)以普通表單形式(鍵值對(duì))發(fā)送到后端 --第二種 axios.defaults.headers.post['Content-Type'] ='application/json'; // 請(qǐng)求體中的數(shù)據(jù)會(huì)以json字符串的形式發(fā)送到后端 --第三種 axios.defaults.headers.post['Content-Type'] ='multipart/form-data'; // 它會(huì)將請(qǐng)求體的數(shù)據(jù)處理為一條消息,以標(biāo)簽為單元,用分隔符分開(kāi)。既可以上傳鍵值對(duì),也可以上傳文件
11.使用10第一種,傳參效果如下:
12.使用10第二種,傳參效果如下:
//注意:使用這種方法,需要修改request.ts代碼:
13.使用10第三種,傳參效果如下:
14.本期的教程到了這里就結(jié)束啦,讓我們一起努力走向巔峰!
總結(jié)
到此這篇關(guān)于axios封裝與傳參示例的文章就介紹到這了,更多相關(guān)axios封裝與傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉的示例代碼
本文主要介紹了vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉,這里采用的是vant的文件上傳組件,通過(guò)上傳圖片后端識(shí)別圖片里的人臉,感興趣的可以了解一下2021-11-11Vue使用localStorage存儲(chǔ)數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了Vue使用localStorage存儲(chǔ)數(shù)據(jù)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值
這篇文章主要介紹了vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07Vue實(shí)現(xiàn)的父組件向子組件傳值功能示例
這篇文章主要介紹了Vue實(shí)現(xiàn)的父組件向子組件傳值功能,結(jié)合完整實(shí)例形式簡(jiǎn)單分析了vue.js組件傳值的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法
Vue 路由過(guò)渡是對(duì) Vue 程序一種快速簡(jiǎn)便的增加個(gè)性化效果的的方法,這篇文章主要介紹了Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法,感興趣的可以了解一下2021-05-05vue3中setup-script的應(yīng)用實(shí)例
script-setup是一個(gè)比較有爭(zhēng)議的新特性,作為 setup 函數(shù)的語(yǔ)法糖,褒貶不一,不過(guò)經(jīng)歷了幾次迭代之后,目前在體驗(yàn)上來(lái)說(shuō),感受還是非常棒的,這篇文章主要給大家介紹了關(guān)于vue3中setup-script應(yīng)用的相關(guān)資料,需要的朋友可以參考下2022-01-01vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式
這篇文章主要介紹了vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06ElementUI 修改默認(rèn)樣式的幾種辦法(小結(jié))
這篇文章主要介紹了ElementUI 修改默認(rèn)樣式的幾種辦法(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07