目錄

一、axios使用

1.支持多種請求方式：

2.安裝

3.簡單使用實例

4.發送并發請求

5.全局配置

二、axios的實例

1.為什么要創建 axios的實例呢?

2.使用

三、、axios模塊封裝

四、axios攔截器

---

一、axios使用

1.支持多種請求方式：

?? ?axios(config)

?? ?axios.request(config)

?? ?axios.get(url[, config])

?? ?axios.delete(url[, config])

?? ?axios.head(url[, config])

?? ?axios.post(url[, data[, config]])

? ? axios.put(url[, data[, config]])

?? ?axios.patch(url[, data[, config]])

2.安裝

npm install axios --save

3.簡單使用實例

1.安裝 import axios from 'axios' 2.get請求 axios({// 默認是geturl: 'http://localhost:8000/home/multidata',method: 'get' }).then((result) => {console.log(result) }) --- axios({//url: 'http://localhost:8000/home/data?type=sell&page=1',url: 'http://localhost:8000/home/data',params: {type: 'sell',page: 1},method: 'get' }).then((result) => {console.log(result) })

4.發送并發請求

有時候，我們可能需求同時發送兩個請求

? ? 使用axios.all，可以放入多個請求的數組。

? ? axios.all([])?返回的結果是一個數組，使用axios.spread可將數組[res1, res2]展開為res1，res2

axios.all([axios({url: 'http://localhost:8000/home/multidata' }), axios({url: 'http://localhost:8000/home/data',params: {type: 'sell',page: 1} })]).then((results) => {console.log(results) }) //axios.spread展開（不太常用） axios.all([axios({url: 'http://localhost:8000/home/multidata' }), axios({url: 'http://localhost:8000/home/data',params: {type: 'sell',page: 1} })]).then(axios.spread((res1, res2) => {console.log(res1)console.log(res2) })) //數組的解構，對應也有對象的解構{name, age} = obj axios.all([axios({url: 'http://localhost:8000/home/multidata' }), axios({url: 'http://localhost:8000/home/data',params: {type: 'sell',page: 1} })]).then(([res1, res2]) => {console.log(res1)console.log(res2) })

5.全局配置

（1）在上面的示例中，我們的BaseURL是固定的

? ? 事實上，在開發中可能很多參數都是固定的。

? ? 這個時候我們可以進行一些抽取，也可以利用axios的全局配置

axios.defaults.baseURL = 'http://localhost:8000' axios.defaults.headers.post['Content-Type'] = 'application/x-www/form-urlencoded' axios.default.timeOut = 50000axios.all([axios({url: '/home/multidata' }), axios({url: '/home/data',params: {type: 'sell',page: 1} })]).then((results) => {console.log(results) })

（2）常見配置項

請求地址

?? ?url:'/user',

請求類型

?? ?method:'get',

請根路徑

?? ?baseURL:'http://www.mt.com/apl,

請求前的數據處理

?? ?transformRequest: [function(data){}]

請求后的數據處理

?? ?transformResponse: [function(data){}],

自定義的請求頭

?? ?headers:{'x-requested-With':'XMLHttpRequest'},

URL查詢對象

?? ?params:{id:12},

查詢對象序列化函數

?? ?paramsSerializer: function(params){}

request body

?? ?data:{key:'a'}

超時設置s

?? ?timeout: 1000,

跨域是否帶 Token

?? ?withCredentials: false,

自定義請求處理

?? ?adapter: function(resolve, reject, config){},

身份驗證信息

?? ?auth: {uname:", pwd: '12'},

響應的數據格式json/blob/ document/ arraybuffer/text/ stream

?? ?responseType:'json',

二、axios的實例

1.為什么要創建 axios的實例呢?

?? ?口當我們從 axios模塊中導入對象時,使用的實例是默認的實例

?? ?口當給該實例設置一些默認配置時,這些配置就被固定下來了.

?? ?口但是后續開發中,某些配置可能會不太一樣.

?? ?口比如某些請求需要使用特定的 baseURL或者 timeouti或者 content-Type等

?? ?口這個時候我們就可以創建新的實例，并且傳入屬于該實例的配置信息.

2.使用

const instance1 = axios.create({// 全局實例配置baseURL: 'http://localhost:8000',timeOut: 5000 })instance1({url: '/home/multidata' }).then(res => {console.log(res) })

三、、axios模塊封裝

import axios from 'axios' // 1.傳success、failure方法 export function request(config, success, failure) {//1.創建實例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 2.發送真正的網絡請求instance(config).then(res => {success(res)}).catch(err => {failure(err)}) } // 2.只傳config export function request2(config) {//1.創建實例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 2.發送真正的網絡請求instance(config.baseConfig).then(res => {config.success(res)}).catch(err => {config.failure(err)}) } // 3.使用Promise（axios本身是返回一個Promise，所以沒必要再次返回一個promise了） export function request3(config) {return new Promise((resolve, reject) => {//1.創建實例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 2.發送真正的網絡請求instance(config).then(res => {resolve(res)}).catch(err => {reject(err)})}) } // 4.簡化 export function request4(config) {//1.創建實例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 2.發送真正的網絡請求return instance(config); } // 封裝網絡請求 import {request, request2, request3, request4} from './network/request' request({url: '/home/multidata' }, res => {console.log(res) }) request2({baseConfig: {url: '/home/multidata'},success: function(res) {console.log(res)} }) request3({url: '/home/multidata' }).then(res => {console.log(res) }).catch(err => {console.log(err) }) request4({url: '/home/multidata' }).then(res => {console.log(res) })

四、axios攔截器

//1.創建實例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 1.1攔截器，必須return，否則拿不到東西instance.interceptors.request.use(config => {console.log('req攔截器success')// 比如config中的一些信息不符合服務器的要求// 比如每次發送網絡請求時，都希望在界面顯示一個請求的圖標// 某些網絡請求（比如登錄）必須攜帶一些特殊的東西console.log(config)return config}, err => {console.log('req攔截器fail')console.log(err)return err})instance.interceptors.response.use(response => {console.log('resp攔截器success中')return response.data}, err => {console.log('resp攔截器fail中')return err})// 2.發送真正的網絡請求instance(config).then(res => {success(res)}).catch(err => {failure(err)})

總結

以上是生活随笔為你收集整理的vue如何发送网络请求，使用axios事半功倍！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。