Vue總結第七天~Promise網路請求和axios 網路模組

2022-01-04 22:00:19

目錄

 

一、Promise 非同步請求(網路請求):

1、Promise是什麼?

2、基本使用:

3、鏈式程式設計:

二、axios 網路模組

✿ 更詳細的可以看官網:Axios 中文檔案 | Axios 中文網

1、axios 是什麼?

2、安裝(npm安裝方式):

✿ axios網路模組過程:

1、傳送基本請求:

(1) 全域性設定: 公共屬性的抽取與設定(常見的全域性設定)

(2)常見設定選項:

 2、axios建立範例:

3、axios攔截器的使用:

4、axios的封裝 (封裝到一個檔案,且封裝成一個方法)

5、axios功能特點:


一、Promise 非同步請求(網路請求):

1、Promise是什麼?

ES6中的非同步程式設計的一種解決方案。Promise鏈式呼叫,使用promise類封裝非同步請求:

2、基本使用:

3、鏈式程式設計:

  //鏈式程式設計
  new Promise((resolve, reject) => {
    //第一次網路請求
    setTimeout(() => {
      //resolve將拿到的引數傳遞給then處理
       resolve('hello');
      //reject('err err err');
    },1000);
  }).then((data) => {
    //第一次網路請求後的處理
    console.log(data);
  }).catch(err => {
    console.log(err);
  });
//當然:then 其實可以既處理成功時的請求,也可以處理失敗時的捕獲異常

二、axios 網路模組

✿ 更詳細的可以看官網:Axios 中文檔案 | Axios 中文網

1、axios 是什麼?

Axios 是一個基於 Promise 的 HTTP 庫(網路請求庫),可以作用於瀏覽器和 node.js 。

2、安裝(npm安裝方式):

npm install axios

✿ axios網路模組過程:

(1)傳送請求

(2) axios建立範例

(3) axios攔截器的使用

1、傳送基本請求:

(1) 全域性設定: 公共屬性的抽取與設定(常見的全域性設定)

例如:

axios.defaults.baseURL = ‘123.207.32.32:8000’
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

(2)常見設定選項:

 2、axios建立範例:

//建立 axios 範例,並進行一些基本的設定
const instance1 = axios.create({
  //基本設定
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
// axios 範例(範例中設定url等引數)進行基本的網路請求1
instance1({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
})

// axios 範例(範例中設定url等引數)進行基本的網路請求2
instance1({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 3
  }
}).then(res => {
  console.log(res);
})

3、axios攔截器的使用:

4、axios的封裝 (封裝到一個檔案,且封裝成一個方法)

使用第三方的東西,記得對它進行一層封裝(好處就是日後預防第三方的東西不再維護時,維護替換比較容易)

import axios from 'axios'

export function request(config) {
  // 1.建立axios的範例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 2.axios的攔截器
  // 2.1.請求攔截的作用
  instance.interceptors.request.use(config => {
    // console.log(config);
    // 1.比如config中的一些資訊不符合伺服器的要求

    // 2.比如每次傳送網路請求時, 都希望在介面中顯示一個請求的圖示

    // 3.某些網路請求(比如登入(token)), 必須攜帶一些特殊的資訊
    return config
  }, err => {
    // console.log(err);
  })

  // 2.2.響應攔截
  instance.interceptors.response.use(res => {
    // console.log(res);
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.傳送真正的網路請求
  return instance(config)
}

5、axios功能特點:

  1. 在瀏覽器建立XMLHttpRequsts
  2. 在node.js 中建立 http請求
  3. 支援 Promise API
  4. 攔截請求和響應資料
  5. 轉換請求和響應資料
  6. 自動轉換JSON資料
  7. 傳送並行請求,使用axios.all( ), 可以放入多個請求的陣列.

        等等