欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

axios封裝與傳參示例詳解

 更新時間:2020年10月18日 10:44:17   作者:灰太狼的情與殤  
這篇文章主要給大家介紹了關(guān)于axios封裝與傳參的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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)圖片上傳識別人臉的示例代碼

    本文主要介紹了vue+axios實現(xiàn)圖片上傳識別人臉,這里采用的是vant的文件上傳組件,通過上傳圖片后端識別圖片里的人臉,感興趣的可以了解一下
    2021-11-11
  • Vue使用localStorage存儲數(shù)據(jù)的方法

    Vue使用localStorage存儲數(shù)據(jù)的方法

    這篇文章主要為大家詳細介紹了Vue使用localStorage存儲數(shù)據(jù)的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05
  • vue實現(xiàn)列表拖拽排序的示例代碼

    vue實現(xiàn)列表拖拽排序的示例代碼

    本文主要介紹了vue實現(xiàn)列表拖拽排序的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • vue $set 實現(xiàn)給數(shù)組集合對象賦值

    vue $set 實現(xiàn)給數(shù)組集合對象賦值

    這篇文章主要介紹了vue $set 實現(xiàn)給數(shù)組集合對象賦值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-07-07
  • Vue實現(xiàn)的父組件向子組件傳值功能示例

    Vue實現(xiàn)的父組件向子組件傳值功能示例

    這篇文章主要介紹了Vue實現(xiàn)的父組件向子組件傳值功能,結(jié)合完整實例形式簡單分析了vue.js組件傳值的相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • 讓ChatGPT解讀Vue3源碼過程解析

    讓ChatGPT解讀Vue3源碼過程解析

    這篇文章主要為大家介紹了讓ChatGPT解讀Vue3源碼過程解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-02-02
  • Vue實現(xiàn)路由過渡動效的4種方法

    Vue實現(xiàn)路由過渡動效的4種方法

    Vue 路由過渡是對 Vue 程序一種快速簡便的增加個性化效果的的方法,這篇文章主要介紹了Vue實現(xiàn)路由過渡動效的4種方法,感興趣的可以了解一下
    2021-05-05
  • vue3中setup-script的應(yīng)用實例

    vue3中setup-script的應(yīng)用實例

    script-setup是一個比較有爭議的新特性,作為 setup 函數(shù)的語法糖,褒貶不一,不過經(jīng)歷了幾次迭代之后,目前在體驗上來說,感受還是非常棒的,這篇文章主要給大家介紹了關(guān)于vue3中setup-script應(yīng)用的相關(guān)資料,需要的朋友可以參考下
    2022-01-01
  • vue3父子組件通信、兄弟組件實時通信方式

    vue3父子組件通信、兄弟組件實時通信方式

    這篇文章主要介紹了vue3父子組件通信、兄弟組件實時通信方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • ElementUI 修改默認樣式的幾種辦法(小結(jié))

    ElementUI 修改默認樣式的幾種辦法(小結(jié))

    這篇文章主要介紹了ElementUI 修改默認樣式的幾種辦法(小結(jié)),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07

最新評論