快捷導(dǎo)航

axios封裝與傳參示例詳解

更新時(shí)間：2020年10月18日 10:44:17 作者：灰太狼的情與殤

這篇文章主要給大家介紹了關(guān)于axios封裝與傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1.開發(fā)環(huán)境 vue+typescript

2.電腦系統(tǒng) windows10專業(yè)版

3.在開發(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)簽為單元，用分隔符分開。既可以上傳鍵值對(duì)，也可以上傳文件

11.使用10第一種,傳參效果如下: