axios封裝與傳參示例詳解
更新時間：2020年10月18日 10:44:17 作者：灰太狼的情與殤
這篇文章主要給大家介紹了關于axios封裝與傳參的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
1.開發(fā)環(huán)境 vue+typescript
2.電腦系統(tǒng) windows10專業(yè)版
3.在開發(fā)的過程中,我們會經(jīng)常使用到 axios進行數(shù)據(jù)的交互,下面我來說一下,axios封裝和傳參!
4-1:下面結構如下:
4-2:request.js代碼如下:
import axios from 'axios'
import qs from 'qs'
axios.defaults.timeout = 2000000; //響應時間
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) => {
// //對響應數(shù)據(jù)做些事
// if (!res.data) {
// return Promise.resolve(res);
// }
// return res;
// }, (error) => {
// console.log(error);
// console.log('網(wǎng)絡異常')
// return Promise.reject(error);
// });
//返回狀態(tài)判斷(添加響應攔截器)
axios.interceptors.response.use((res) =>{
//對響應數(shù)據(jù)做些事
if(!res.data.success){
return Promise.resolve(res);
}
return res;
}, (error) => {
console.log('網(wǎng)絡異常')
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,
}
//注意:請求頭的配置,決定了傳參的方法和格式,請求頭的配置至關重要
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.本期的教程到了這里就結束啦,讓我們一起努力走向巔峰!
總結
到此這篇關于axios封裝與傳參示例的文章就介紹到這了,更多相關axios封裝與傳參內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了Vue Spa切換頁面時更改標題的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue axios獲取token臨時令牌封裝案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue移動端項目實現(xiàn)使用手機預覽調試操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue 項目往往會搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。這篇文章主要介紹了vue 項目地址去掉 #的方法,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)頁面緩存功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Vue.js遞歸組件實現(xiàn)組織架構樹和選人功能案例分析
這篇文章主要介紹了Vue.js遞歸組件實現(xiàn)組織架構樹和選人功能,本文通過案例代碼講解的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
本文介紹了如何使用excel.js插件和Vue實現(xiàn)純前端Excel文件導出,并詳細步驟包括安裝插件、創(chuàng)建工作簿和工作表、定義列數(shù)據(jù)、設置樣式、行級操作、遍歷行和單元格、插入圖片和超鏈接2024-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)學生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
Editor.js是一個用于構建具有完全可定制化塊結構的現(xiàn)代編輯器的開源庫,它提供了一個簡潔、可擴展和易于使用的接口,使開發(fā)人員能夠創(chuàng)建擁有豐富內容和互動性的編輯器,這篇文章主要給大家介紹了關于vue3使用富文本編輯器Editor.js的簡單方法,需要的朋友可以參考下2024-04-04
vue使用lottie-web實現(xiàn)web動畫效果
在web端,lottie-web庫可以解析導出的動畫json文件,并將其以svg或者canvas的方式將動畫繪制在我們的頁面上,這篇文章主要介紹了vue使用lottie-web實現(xiàn)web動畫,需要的朋友可以參考下2024-06-06