1.開發環境 vue+typescript

2.電腦系統 windows10專業版

3.在開發的過程中,我們會經常使用到 axios進行資料的互動,下面我來說一下,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) => {
 //在傳送請求之前做某件事
 // 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) => {
//  //對響應資料做些事
//  if (!res.data) {
//  return Promise.resolve(res);
//  }
//  return res;
// },(error) => {
//  console.log(error);
//  console.log('網路異常')
//  return Promise.reject(error);
// });

//返回狀態判斷(新增響應攔截器)
axios.interceptors.response.use((res) =>{
 //對響應資料做些事
 if(!res.data.success){
  return Promise.resolve(res);
 }
 return res;
},(error) => {
 console.log('網路異常')
 return Promise.reject(error);
});

//返回一個Promise(傳送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(傳送get請求)
export function fetchGet(url,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中輸入如下:

//可以看到,接受到了前端傳過來的引數!

9.引數的傳遞取決於,request.ts中請求頭的配置!

10.請求頭配置如下:

--第一種
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //請求體中的資料會以普通表單形式（鍵值對）傳送到後端
--第二種
axios.defaults.headers.post['Content-Type'] ='application/json'; // 請求體中的資料會以json字串的形式傳送到後端
--第三種
axios.defaults.headers.post['Content-Type'] ='multipart/form-data'; // 它會將請求體的資料處理為一條訊息，以標籤為單元，用分隔符分開。既可以上傳鍵值對，也可以上傳檔案

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

12.使用10第二種,傳參效果如下:

//注意:使用這種方法,需要修改request.ts程式碼:

13.使用10第三種,傳參效果如下:

14.本期的教程到了這裡就結束啦,讓我們一起努力走向巔峰!

總結

到此這篇關於axios封裝與傳參示例的文章就介紹到這了,更多相關axios封裝與傳參內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！