天天看點
傳回

網絡請求庫 – axios庫

作者：Java小陳

1.認識Axios庫

Axios 是一個基于 Promise 的 HTTP 庫，可以用在浏覽器和 node.js 中發送網絡請求。

1.1 Axios的優點

XMLHttpRequest，fetch是進階一點的原生

原生的缺點：

1.需要自己來封裝原生。

2.原生某些功能不具備，你需要自己來完成請求攔截，響應攔截等。

3.js可以跑在浏覽器和node上面，但是原生的fetch是不能工作在node中，node需要使用别的api。比如http子產品來發送請求。

使用axios的優點

1.已經幫我們把原生的底層邏輯都封裝了。

2.還額外增加了攔截器等功能

3.适配浏覽器和node。axios已經幫我們封裝好了，在在浏覽器中發送 XMLHttpRequests 請求，在 node.js 中發送 http請求。不用擔心在不同的平台使用不同的api

1.2 功能特點

  • 在浏覽器中發送 XMLHttpRequests 請求
  • 在 node.js 中發送 http請求
  • 支援 Promise API
  • 攔截請求和響應
  • 轉換請求和響應資料
  • 等等

1.3 安裝axios

在項目中安裝axios

npm install axios

2.發送常見的請求和配置

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

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

在main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

//1.發送request請求
axios
  .request({
    url: 'http://123.207.32.32:8000/home/multidata',
    method: 'get'
  })
  .then((res) => {
    console.log('res: ', res.data)
  })

//request裡面的參數中的method裡面寫get的話，就和axios.get一樣了，method不寫的話，預設是get

//2.發送get請求(帶參數有兩種寫法，第二種用的比較多)
axios.get('http://123.207.32.32:9001/lyric?id=500665346').then((res) => {
  console.log('res: ', res.data)
})

axios
  .get('http://123.207.32.32:9001/lyric', {
    params: {
      id: 500665346
    }
  })
  .then((res) => {
    console.log('res: ', res.data)
  })

//3.post 請求(2種方法)
axios
  .post('http://123.207.32.32:1888/02_param/postjson', {
    name: 'why',
    age: 18,
    height: 1.88
  })
  .then((res) => {
    console.log('res: ', res.data)
  })
//這種寫法第二個 參數是data

//4.post請求方法二，直接把第二個參數當作config, 把data寫道config裡面
axios
  .post('http://123.207.32.32:1888/02_param/postjson', {
    data: {
      name: 'why',
      age: 18,
      height: 1.88
    }
  })
  .then((res) => {
    console.log('res: ', res.data)
  })

httpbin.org/get發送get 請求，httpbin.org/post發送post請求

用來做測試

3.常見的配置選項

網絡請求庫 – axios庫

3.1baseURL

import axios from 'axios'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

//發送多個請求，後面的位址是不一樣的，baseURL可以解決這個問題
// 給axios執行個體配置公共的基礎配置
const baseURL = 'http://123.207.32.32:8000'
axios.defaults.baseURL = baseURL
//也可以配置timeout
axios.defaults.timeout = 10000
//axios.defaults.headers = {}

//1.1 get:/home/multidata
//自動拼接，實際上是http://123.207.32.32:8000/home/multidata
axios.get('/home/multidata').then((res) => {
  console.log('res: ', res.data)
})

3.2 axios.all

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

  • 使用axios.all, 可以放入多個請求的數組.

    希望資料都有請求之後再拿到資料

  • axios.all([]) 傳回的結果是一個數組，使用 axios.spread 可将數組 [res1,res2] 展開為 res1, res2 
// 2.axios發送多個請求
//本質就是使用了 Promise.all
axios
  .all([
    axios.get('/home/multidata'),
    axios.get('http://123.207.32.32:9001/lyric?id=500665346')
  ])
  .then((res) => {
    console.log('res:', res)
  })
網絡請求庫 – axios庫

4.建立axios執行個體

◼ 為什麼要建立axios的執行個體呢?

  • 當我們從axios子產品中導入對象時, 使用的執行個體是預設的執行個體；
  • 當給該執行個體設定一些預設配置時, 這些配置就被固定下來了.
  • 但是後續開發中, 某些配置可能會不太一樣；
  • 比如某些請求需要使用特定的baseURL或者timeout等.
  • 這個時候, 我們就可以建立新的執行個體, 并且傳入屬于該執行個體的配置資訊.

直接這麼使用，這裡axios也是一個執行個體，是axios預設庫提供給我們的執行個體，實際項目種不使用這個執行個體來發送請求，所有的請求都是一樣的設定。

import axios from 'axios'
axios
  .request({
    url: 'http://123.207.32.32:8000/home/multidata',
    method: 'get'
  })
  .then((res) => {
    console.log('res: ', res.data)
  })
           
// axios預設庫提供給我們的執行個體對象
axios.get("http://123.207.32.32:9001/lyric?id=500665346")

// 建立其他的執行個體發送網絡請求
const instance1 = axios.create({
  baseURL: "http://123.207.32.32:9001",
  timeout: 6000,
  headers: {}
})

instance1.get("/lyric", {
  params: {
    id: 500665346
  }
}).then(res => {
  console.log("res:", res.data)
})

const instance2 = axios.create({
  baseURL: "http://123.207.32.32:8000",
  timeout: 10000,
  headers: {}
})

5.請求和響應攔截器

◼ axios的也可以設定攔截器：攔截每次請求和響應

axios.interceptors.request.use(請求成功攔截, 請求失敗攔截)

// fn1: 請求發送成功會執行的函數

// fn2: 請求發送失敗會執行的函數

◼ axios.interceptors.response.use(響應成功攔截, 響應失敗攔截)

// fn1: 資料響應成功(伺服器正常的傳回了資料 200或者200多，都是成功的狀态)

//fn2：伺服器響應400+或者500+的時候調用這個函數

//對執行個體配置攔截器

//兩個參數，一個請求成功的回調攔截，一個是請求失敗的回調攔截
axios.interceptors.request.use(
  (config) => {
//config是發送請求時候的參數，并且用完之後要給人家傳回出去
//用的時候可以做一些别的操作，比如改變config.url=XXX之類的，變換位址

    console.log('請求成功攔截')
    // 1.開始loading的動畫

    // 2.對原來的配置進行一些修改
    // 2.1. header
    // 2.2. 認證登入: token/cookie
    // 2.3. 請求參數進行某些轉化
    return config
  },
  (err) => {
    console.log('請求失敗攔截')
    return err
  }
)
axios.interceptors.response.use(
  (res) => {
    console.log('響應成功的攔截')
    return res
  },
  (err) => {
    console.log('伺服器響應失敗')
    return err
  }
)

axios.interceptors.response.use(
  (res) => {////這個res是響應回來的資料
    console.log('響應成功攔截')
    // 1.結束loading的動畫

    // 2.對資料進行轉化, 再傳回資料
    return res.data
  },
  (err) => {
    console.log('伺服器響應失敗')
    return err
  }
)

axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then((res) => {
  console.log('res:', res)
})

6.axios請求庫封裝（簡潔版）

在src檔案夾裡面建立service檔案夾

與伺服器溝通有關的檔案放裡面

建立index.js

import axios from "axios";

class HYRequest {
  constructor(baseURL, timeout = 10000) {
    this.instance = axios.create({
      baseURL,
      timeout,
    });
  }
  request(config) {
    return this.instance.request(config).then((res) => {
      return res.data;
    });
  }
  get(config) {
    return this.request({ ...config, method: "get" });
  }
  post(config) {
    return this.request({ ...config, method: "post" });
  }
}

export default new HYRequest("http://123.207.32.32:9001");

main.js

import { createApp } from "vue";
import axios from "axios";
import App from "./App.vue";
import hyRequest from "./service";

createApp(App).mount("#app");

hyRequest
  .request({
    url: "/lyric?id=500665346",
  })
  .then((res) => {
    console.log("res:", res);
  });

hyRequest
  .get({
    url: "/lyric",
    params: {
      id: 500665346,
    },
  })
  .then((res) => {
    console.log("res:", res);
  });
網絡請求庫 – axios庫

作者：未路過

連結：https://www.jianshu.com/p/2f5af8712da6

網絡請求 axios
上一篇: RISC-V品牌的中國化曆程（四）
下一篇: 用手表來控制汽車，這麼潮的操作快學起

繼續閱讀