學習axios必知必會（2）~axios基本使用、使用axios前必知細節、axios和例項物件區別、攔截器、取消請求

一樂樂發表於2022-01-23
iOS物件

一、axios的基本使用：

✿ 使用axios前必知細節：

1、axios 函式物件（可以作為axios(config)函式使用去傳送請求，也可以作為物件呼叫方法axios.request(config)傳送請求)

■ 檢視原始碼發現，起初axios是一個函式，但後續又給它新增上了一些屬性【方法屬性】

2、[, ] 是可選引數列表 舉例：axios.get(url[, config])，其中的[, config] 是可選引數



✿ axios 函式物件可以呼叫自身axios(config)傳送請求也可以呼叫屬性的方法axios.request(config)傳送請求的原理：

<script>
//一開始a只是一個函式
    var a = function () {
        console.log('hi');
    }
    var fn = function () {
        console.log('hi');
    }
    //給a這個函式物件新增屬性後，讓它的屬性指向某個函式，則a呼叫自身函式，或者呼叫屬性fn的方法----效果是一樣的
    a.fn = fn;
    console.log(a);
    console.dir(a);
    a();
    a.fn();
</script>
學習axios必知必會（2）~axios基本使用、使用axios前必知細節、axios和例項物件區別、攔截器、取消請求



1、axios(config):呼叫自身，通用/最本質的發任意型別請求的方法：

<button class="btn btn-primary">post請求</button>

//獲取按鈕
const btns = document.querySelectorAll('button');
btns[0].onclick = function (){
    //呼叫axios方法來傳送AJAx請求，axios方法的返回值是一個Promise物件（then方法可以拿到非同步請求的結果）
    axios({
        //請求型別
        method: 'post',
        //URL
        url:'http://localhost:3000/posts/2',
	    //設定請求體(即傳輸的資料)
        data:{
  	 	  title: "candy",
   	  	  author: "i like"
        }
    }).then(response => {
        console.log(response)
    })
};

2、axios.request(config)：呼叫屬性的方法傳送請求,等同於 axios(config）

<button class="btn btn-primary">post請求</button>

//獲取按鈕
const btns = document.querySelectorAll('button');
btns[0].onclick = function (){
    //呼叫axios方法來傳送AJAx請求，axios方法的返回值是一個Promise物件（then方法可以拿到非同步請求的結果）
    axios.request({
        //請求型別
        method: 'post',
        //URL
        url:'http://localhost:3000/posts/2',
	    //設定請求體(即傳輸的資料)
        data:{
  	 	  title: "candy",
   	  	  author: "i like"
        }
    }).then(response => {
        console.log(response)
    })
};

3、使用axios的例項物件（通過axios.create([config]) 進行建立）：

//一般建立axios例項時，傳入一些預設配置
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
});
//instance 例項和 axios物件功能基本差不多
//使用axios的例項物件instance，方法的返回值是一個Promise物件（then方法可以拿到非同步請求的結果）
instance({
    //請求型別
    method: 'GET',
    //URL
    url: '/getJoke',
    //設定請求體(即傳輸的資料)
    params:{
       title: "candy",
       author: "i like"
    }
}).then(response => {
    console.log(response);
})



✿ 使用axios(config) 方法 和建立 axios例項物件的區別？

​ ■ axios.create(config) 對axios請求進行封裝，建立axios例項物件的意義：不同請求介面擁有不同配置，建立新的axios例項就可以有新的配置來應對介面配置需求。每個axios例項物件都有自己特有的配置, 分別應用到不同要求的介面請求中。

​ ■ axios例項物件和axios基本相同，只是例項物件少了有取消請求和批量發請求的方法。



二、axios的攔截器（對請求、響應做預處理）

1、請求攔截器：axios.interceptors.request.use(成功處理函式，失敗處理函式)

■ 請求攔截：

1,可能是config中有一些資訊是不符合伺服器的要求
2,希望每次傳送網路請求，在介面可以顯示有一個請求的圖示，就是那個轉呀轉的圓圈
3,一些網路請求必須要有特殊資訊，例如登入（需要有token）


2、響應攔截器：axios.interceptors.response.use(成功處理函式，失敗處理函式)

■ 響應攔截：

1,對響應的資料進行格式處理



三、axios的取消請求

■ 作用：取消掉某些使用者，多次不斷地點選請求按鈕而傳送請求給伺服器造成壓力

■ 取消方式：

（例如通過建構函式來建立取消令牌）：在配置物件中新增 cancelToken屬性，然後拿到執行函式中的引數c（取消函式）

let cancel = null;
//檢測上一次請求是否完成（沒完成，取消當前的請求）
if(cancle != null){
    cancle();
}
//axios傳送請求
axios.get('/user/12345', {
    cancelToken: new axios.CancelToken(function executor(c){//引數c是取消函式        	cancel = c;
    })
}).then(response => {
    console.log(response);
    cancel = null; //請求執行完畢，恢復cancel的初始值

});

相關文章