1. 簡(jiǎn)介

1.1 什么是axios

axios是一個(gè)基于Promise的Http庫(kù)，可以用在node.js環(huán)境和瀏覽器中

1.2 功能特點(diǎn)

• 在瀏覽器中發(fā)送XMLHttpRequests
• 在node.js中發(fā)送Http請(qǐng)求
• 支持Promise
• 攔截請(qǐng)求和響應(yīng)
• 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
• 取消請(qǐng)求
• 自動(dòng)轉(zhuǎn)換json數(shù)據(jù)
• 客戶端支持防御XSRF

1.3 安裝

這里就簡(jiǎn)單的介紹一種安裝方式:npm安裝

npm install axios

還是其他兩種方式：bower安裝和cdn安裝

2. axios的基本使用

2.1 發(fā)送get 請(qǐng)求

import axios from 'axios'//第一種方式 axios.get("http://127.0.0.1:8000/home/data?type=sell&page=1").then(res=>{console.log(res) }).catch(err=>{console.log(err) })//第二種方式 axios.get("http://127.0.0.1:8000/home/data",{params:{type:'sell'page:1 }}).then(res=>{console.log(res.data)}).catch(err=>{console.log(err)})

2.2 發(fā)送post請(qǐng)求

import axios from 'axios'axios.post("http://127.0.0.1:8000/home/data",{id:1,username:'zhangsan',age:18}).then(res=>{console.log(res) }).catch(err=>{console.log(err) })

2.3 發(fā)送并發(fā)請(qǐng)求

有時(shí)候我們可能需要同時(shí)發(fā)送多個(gè)請(qǐng)求來(lái)獲取結(jié)果，此時(shí)就可以使用axios.all([])，可以放入多個(gè)請(qǐng)求的數(shù)組

axios.all([])返回的是一個(gè)數(shù)組對(duì)象

import axios from 'axios'axios.all([axios.get("http://127.0.0.1:8000/home/multidata"),axios.get("http://127.0.0.1:8000/home/data",{params:{type: 'sell',page:1}})]).then(res=>{console.log(res[0]);console.log("======================");console.log(res[1]);})

3. 默認(rèn)設(shè)置

我們可以設(shè)置一些默認(rèn)設(shè)置，這些設(shè)置將在以后每次的請(qǐng)求中生效。比如我們的請(qǐng)求路徑、請(qǐng)求頭參數(shù)等等

axios.defaults.baseURL = 'http://127.0.0.1:8100/test';axios.defaults.headers.contentType = "application/json;charset=UTF-8";axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN'

4. axios實(shí)例

4.1 為什么要?jiǎng)?chuàng)建axios實(shí)例

當(dāng)我們從axios模塊中導(dǎo)入對(duì)象時(shí)，使用的實(shí)例時(shí)默認(rèn)實(shí)例。當(dāng)給該實(shí)例設(shè)置一些默認(rèn)的配置時(shí)，這些配置就被固定下來(lái)了。但是，當(dāng)后續(xù)開(kāi)發(fā)中，某些配置可能不一樣。比如，某些請(qǐng)求需要特定的baseURL或者請(qǐng)求頭參數(shù)等，這個(gè)時(shí)候，我們就需要?jiǎng)?chuàng)建新的實(shí)例，并且傳入屬于該實(shí)例的配置信息。

4.2 基本使用

import axios from 'axios'//創(chuàng)建axios實(shí)例 const axiosInstance = axios.create({baseURL:'http://127.0.0.1:8100',headers:{'Content-Type':'application/json'}timeout:5000})//使用axios實(shí)例發(fā)送請(qǐng)求 axiosInstance.get('/data',{params:{type:'sell',page:2}})

4.3 axios封裝

我們可以在一個(gè)單獨(dú)的js文件中，封裝很多個(gè)axios實(shí)例，然后導(dǎo)出方便在項(xiàng)目開(kāi)發(fā)中應(yīng)對(duì)不同的需求而需要的不同axios實(shí)例。

5. 攔截器

5.1 使用

axios提供了攔截器，用于我們?cè)诎l(fā)送每次請(qǐng)求或者得到響應(yīng)后，進(jìn)行對(duì)應(yīng)的處理。

配置請(qǐng)求和響應(yīng)攔截：

import axios from 'axios';/*** 封裝axios* @param config* @returns {AxiosPromise}*/ export default function request(config) {const instance = axios.create({baseURL: 'http://127.0.0.1:8100/test',timeout: 5000});instance.interceptors.request.use(config=>{console.log('請(qǐng)求成功的攔截器中');return config},error => {console.log('請(qǐng)求錯(cuò)誤的攔截器中');return error;})instance.interceptors.response.use(config=>{console.log('響應(yīng)成功的攔截器中');return config;},error => {console.log('響應(yīng)失敗的攔截器中');return error;})return instance(config);}

在其他組件中使用：

import request from './network/request';request({url:'/user',method:'post',data:{id:1,username:'lisi',age:19}}).then(res=>{console.log(res);}).catch(err=>{console.log(err);})

結(jié)果：

5.2 作用

• 請(qǐng)求攔截中可以做的事
• 當(dāng)發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí)，可以在頁(yè)面中添加一個(gè)loading組件，作為動(dòng)畫
• 某些請(qǐng)求要求用戶登錄，判斷用戶是否有token,沒(méi)有token則跳轉(zhuǎn)到登錄頁(yè)面
• 對(duì)請(qǐng)求的參數(shù)進(jìn)行序列化
• 響應(yīng)攔截中可以做的事
• 在成功的響應(yīng)中可以對(duì)數(shù)據(jù)進(jìn)行過(guò)濾
• 在失敗的響應(yīng)中可以根據(jù)status判斷報(bào)錯(cuò)的錯(cuò)誤狀態(tài)碼來(lái)跳轉(zhuǎn)到不同的錯(cuò)誤提示頁(yè)面

總結(jié)

以上是生活随笔為你收集整理的axios post body参数_09-axios的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。