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