沐鳴代理:_網絡模塊axios的簡單應用

一、axios的基本使用

例子中使用到的url僅作為示例,不一定有效,想要復現代碼需要使用能夠提供數據的有效服務器接口url

1.1.什麼是axios

axios:ajax i/o system;是用於在vue.js中發送網絡請求的第三方框架;

可通過許多方式發送網絡請求比如:

選擇一:傳統的Ajax,配置和調用方式十分混亂,不推薦;

選擇二:jQuery-Ajax,基於jQuery框架,不適合在vue.js中使用;

選擇三:官方在Vue1.x時推出的Vue-resource,由於官方不再維護,不推薦;

最佳選擇:Vue.js作者尤雨溪推薦的axios,具有非常多的優點,使用起來也十分方便。

1.2.安裝axios

想要使用axios首先要在node中安裝axios,由於運行時依賴axios,所以採用‘–save’的安裝方式。

npm install axios --save

1.3.axios的基本使用

//首先要引入

import axios from 'axios'

//1.最基本的使用方式,method表示請求數據的方法,res為請求到的數據,可在then()中處理。(url僅為示例,表示的服務器接口並不一定存在)

axios({

url: 'http://123.207.32.32:8000/home/multidata',

method: 'get'

}).then(res => {

console.log(res);

})

//2.進行參數拼接

axios({

url: 'http://123.207.32.32:8000/home/data',

// 專門針對get請求的參數拼接

params: {

type: 'pop',

page: 1

}

}).then(res => {

console.log(res);

})

1.4.axios發送併發請求

以下為使用全局的axios和對應的配置進行網絡請求,其中的url都要拼接上baseURL。這種方式只能向固定的服務器接口地址’http://123.207.32.32:8000′ 請求數據,不能滿足向不同的分佈式服務器請求數據的需求。

//定義全局的baseURL和請求時間timeout

axios.defaults.baseURL = 'http://123.207.32.32:8000'

axios.defaults.timeout = 5000

//使用axios.all()進行併發的數據請求,同樣使用then()處理請求到的數據

axios.all([axios({

url: '/home/multidata'

}), axios({

url: '/home/data',

params: {

type: 'sell',

page: 5

}

})])

.then(axios.spread((res1, res2) => {

console.log(res1);

console.log(res2);

}))

1.5.創建axios實例請求數據

通過創建axios實例,每一個被創建的實例都有各自的配置,可以向不同ip地址的服務器請求數據,彼此互不干擾。

//創建第一個axios實例:instance1

const instance1 = axios.create({

baseURL: 'http://123.207.32.32:8000',

timeout: 5000

})

//實例instance1可單獨的向服務器請求數據並進行處理

instance1({

url: '/home/multidata'

}).then(res => {

console.log(res);

})

//也可以採用拼接參數的方式請求數據,實例instance1擁有自己的配置

instance1({

url: '/home/data',

params: {

type: 'pop',

page: 1

}

}).then(res => {

console.log(res);

})

// 如果有其他請求可以再創建一個axios的實例:instance2,這樣就可以向其他ip地址的服務器接口請求數據了

const instance2 = axios.create({

baseURL: 'http://222.111.33.33:8000',

timeout: 10000,

// headers: { }//還可以根據需要配置對應的headers

})

二、axios的應用

2.1.不規範的寫法

在組件App.vue中按如下方式請求數據,並進行展示:

<template>

<div id="app">

<!-- 打印請求到的數據 -->

<div>{{result}}</div>

</div>

</template>

<script>

// 引入axios

import axios from 'axios'

export default {

name: 'App',

components: {

},

data(){

return {

// 對請求來的數據進行處理(這裏省略)

result:''

}

},

//生命周期函數created():在Vue實例創建的時候就調用。在這裏實現,Vue實例一創建便發送數據請求

created(){

axios({

url: 'http://123.207.32.32.:8000/api/home/multidate'

}).then(res => {

console.log(res);

// 將請求到的數據res存儲到data中

this.result = res;

})

}

}

</script>

<style>

</style>

雖然這種方法也可以正常請求到數據,但是,如果每一個組件都使用這種方式請求數據,就會對第三方框架axios產生過度的依賴。一旦axios框架不再維護或出現重大bug不再修復,想要在原有項目中去除對第三方框架axios的依賴使用其他框架就會變得十分複雜。所以這種請求數據的方式雖可行,但是非常不規範。不符合”高內聚,低耦合”的程序設計思想。

2.2.axios的規範用法

單獨封裝一個axios組件進行數據請求(模塊化思想)。如圖,這樣即使第三方框架axios更改了,只需要修改封裝的組件x即可。所以,當我們使用第三方框架的時候,最好採用這種方式,減小對第三方框架的依賴,便於維護。

首先在,項目目錄的src(源碼)文件夾下新建network文件夾,再在裏面新建request.js文件,專門用於放置axios數據請求組件:

以下示例為,在request.js文件中封裝axios數據請求模塊,在main.js中進行數據請求。

方式一:

在request.js中:

//導入第三方框架

import axios from 'axios'

//1.創建axios的實例(不要使用全局的方式)並進行相應配置

/*

為了考慮擴展性,不要用export default 直接導出axios對象。而是一函數形式導出,函數裏面可有多個axios實例

傳入三個參數:其中success和failure分別是表示請求成功和失敗后的處理函數,負責把請求到的數據通過回調傳出去

*/

export function request(config, success, failure) {

//該函數的基本配置

const instance = axios.create({

baseURL: 'http://123.207.32.32:8000',

timeout: 5000

})

//2.發送真正的網絡請求(在該函數的相同配置下可創建不同的實例);

/*

這裏axios實例instance的參數config是在request函數基本配置基礎上的配置:傳入config中的url: '/home',那麼加上request函數的基本配置,最後請求數據的url:'http://123.207.32.32:8000/home';相當於request函數確定請求的服務器地址,request函數里的axios實例請求同一服務器上的其他接口(分頁)數據。

*/

instance(config)

.then(res => {

// 通過回調傳入的success函數的方式把請求到的數據傳出去

success(res)

})

.catch(err => {

// 同上

failure(err)

})

}

/* 可傳出包含多個實例的多個函數

export function instance2() {

}

在main.js文件中請求數據:

//導入第三方框架

import axios from 'axios'

// 引入request函數.

import { request } from "./network/request";

//調用request函數,傳入三個參數

request(

// 參數1:config

{

url: '/home/multidata'

},

// 參數2:success函數

/*

補充:如何實現回調?

1.把success函數當作參數傳入request函數;

2.request函數調用傳進來的success函數,並傳入請求到的數據:success(res);

3.success(res)相當於函數調用,回到了這裏調用success函數,並成功地把res傳了過來.

*/

res => {

console.log(res);//處理代碼

},

// 參數3:failure函數

err => {

console.log(err);

}

)

方式二:

只給request函數傳入一個參數config:

在request.js中:

// 導入axios框架

import axios from 'axios'

//要求傳入的config中包含success和failure兩個函數

export function request(config) {

const instance = axios.create({

baseURL: 'http://123.207.32.32:8000',

timeout: 5000

})

//2.發送真正的網絡請求,config.baseConfig負責傳入各axios實例的配置

instance(config.baseConfig)

.then(res => {

// 通過config調用success函數

config.success(res)

})

.catch(err => {

config.failure(err)

})

}

在main.js文件中請求數據:

// 引入request函數.

import { request } from "./network/request";

//僅傳入一個參數:config對象

request ({

baseConfig: {

// 基本配置

},

success: function(res){

//處理代碼

},

failure: function (err){

//處理代碼

}

})

方式三(更優雅):

上面的兩種方式都是採用回調函數的方式,不夠優雅。更加優雅的方式是採用ES6的Promise實現:

在request.js中:

// 導入axios框架

import axios from 'axios'

export function request(config) {

//在函數中返回一個新建的Promise對象

return new Promise((resolve, reject) => {

//1.發送真正的網絡請求

const instance = axios.create({

baseURL: 'http://123.207.32.32:8000',

timeout: 5000

})

//2.發送真正的網絡請求,config.baseConfig負責傳入基本配置

instance(config)

.then(res => {

//通過Promise對象的resolve和reject函數把請求到的數據傳出去

resolve(res)

})

.catch(err => {

reject(err)

})

})

}

在main.js文件中請求數據:

// 引入request函數.

import { request } from "./network/request";

//注意request函數返回了一個Promise對象,所以可以直接.then()進行處理

request({

url: '/home/multidata',

}).then(res => {

console.log(res)

}).catch(err => {

console.log(err)

})

方式四(最優雅):

以為就只有上面三種封裝方法?還有對優雅的封裝方式呢:

在request.js中:

export function request(config) {

//1.創建axios實例

const instance = axios.create({

baseURL: 'http://123.207.32.32:8000',

timeout: 5000

})

//2.發送真正的網絡請求

// 實際上instance(config)返回的即是一個Promise,不必像方式三一樣在函數中封裝一層Promise並返回出去

return instance(config)

}

在main.js文件中請求數據:

// 引入request函數.

import { request } from "./network/request";

request({

url: '/home/multidata',

}).then(res => {

console.log(res)

}).catch(err => {

console.log(err)

})

總結:封裝的方式推薦使用方式四,最靈活也最簡潔。封裝完畢之後,想要發送網絡請求只需要引入並調用request()函數就行了。這樣,即使axios框架不維護了,也只是需要更改request()函數而已,十分利於維護。

三、axios攔截器

axios提供了攔截器,用於在每次發送完請求或者得到響應后,進行對應的處理。

攔截器一共提供了四種攔截:

請求成功后攔截

請求失敗后攔截

響應成功后攔截

響應失敗后攔截

在上面封裝好的request.js基礎上添加攔截器:

export function request(config) {

//1.創建axios實例

const instance = axios.create({

baseURL: 'http://123.207.32.32:8000',

timeout: 5000,

// headers:{}

})

/*

2.axios攔截器

axios.interceptors:全局攔截器

局部攔截器(僅攔截instance實例)

use()的兩個參數都為函數

*/

/*

2.1.請求攔截:

成功發出請求時,使用use()第一個參數(函數)處理;

發出請求失敗時,使用use()第而個參數(函數)處理

*/

instance.interceptors.request.use(

//攔截到的時config配置信息

config => {

console.log(config);//打印攔截信息

/*

這裏可以對攔截到的信息進行處理

*/

//攔截完config之後一定要返回,不然請求就發不出去了

return config;

},

err => {

console.log(err);

}

);

/*

2.2.響應攔截:

響應成功,使用use()第一個參數(函數)處理;

響應失敗,使用use()第而個參數(函數)處理

*/

instance.interceptors.response.use(

//攔截到的是服務器返回的數據res

res => {

console.log(res);

// 同樣處理完后一定要返回被攔截的結果res,這裏只返回res.data即可,因為服務器的響應一般是數據

return res.data;

},

err => {

console.log(err);

}

)

//3.發送真正的網絡請求

return instance(config)

}

在main.js中調用request函數發送網絡請求:

// 引入request函數.

import { request } from "./network/request";

request({

url: '/home/multidata',

}).then(res => {

console.log(res)

}).catch(err => {

console.log(err)

})

請求攔截:

可以看到當成功發出請求時,在request.js中的第88行打印了請求攔截的信息就是出傳入的config相關配置。當發送請求失敗時,由use()的第二個參數(函數)打印失敗信息。

響應攔截:

當服務器響應失敗時,由use()的第二個參數(函數)打印失敗信息。

為什麼需要請求攔截?/請求攔截的作用

當config中的一些信息不符合服務器的要求時。比如修改headers信息,除了可以在創建axios實例時修改時,還可以攔截之後進行修改。

當每次發送網絡請求時,都希望在界面中显示一個請求的圖標。就可以在攔截后通過show()显示出來,請求成功后,再在相應攔截中進行隱藏。

某些網絡請求(比如登錄(token)),必須攜帶一些特殊的信息。

原文:https://www.bbsmax.com/A/D854Ea8wdE/

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/7721