Vue-axios 封裝了一手好axios：）

zy簡單男孩發表於2021-08-14
VueiOS封裝

請求方式

 

 

 很多種請求方式，重點還是第一種吧

下載

npm install axios --save

下載完成

直接匯入

import axios from 'axios'

簡單配置

axios({
  url: 'http://'
}).then(res => {
  console.log(res);
})

併合請求

//並和請求
axios.all([
  axios({
    url: "http://123.207.32.32:8000/home/multidata"
  }),
  axios({
    url: 'http://123.207.32.32:8000/home/multidata',
    method: 'get',
    params: {
      type: 'pop',
      page: 3

    }
  })
  // 就是物件的解構
]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

全域性配置

axios.defaults.baseURL = "http://123.207.32.32:8000" 地址
axios.defaults.timeout = 5000  超時時間

請求配置

axios.all([
  axios({
    url: "/home/multidata"
  }),
  axios({
    url: '/home/multidata',
    method: 'get',
    params: {
      type: 'pop',
      page: 3

    }
  })
  // 就是物件的解構
]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

常見的配置選項

 

 

get 傳 params

post 傳 data

 

 

 axios 例項

解釋

有些時候url地址的ip可能會不同

那麼就會出現多個baseURL和多個axios

這個時候就是創axios例項，不同的例項就可以配置不同的url 使用不同的 axios

// 創造axios例項instance1
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
// 然後就可以使用這個例項axios(instance1)進行使用
instance1({
  url: "/home/multidata"
}).then(res => {
  console.log(res);
})

// 創造axios例項instance1
const instance2 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
// 然後就可以使用這個例項axios(instance2)進行使用
instance2({
  url: '/home/multidata',
  method: 'get',
  params: {
    type: 'pop',
    page: 3
  }
}).then(res => {
  console.log(res);
})

這樣寫在main.js就是太多太麻煩

然後我們直接寫在元件裡的create（）{}中，每次重新建立一個元件就呼叫axios，但是每個元件都寫，又是太過於麻煩。

這是個危險的行為，如果有一天axios下架了那麼專案裡的的每個地方都要改，工作量可想而知。

於是我們有思路：

 

那一天axios沒用了我們就直接改我們自己封裝的三方外掛檔案

第一種：

 

 建立一個request.js檔案

import axios from 'axios'

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

    //傳送真正的網路請求
    instance(config)
        .then(res => {
            // console.log(res);
            success(res)
        })
        .catch(err => {
            // console.log(err);
            failure(err)
        })
}

在main.js檔案裡

// 5.封裝request模組
import { request } from './network/request.js'

request({
  url: "/home/multidata"
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})

這個封裝還是有些問題，我們可以不用三個引數嗎？直接用一個物件包三個變數就行，我們繼續改進

第二種：

export function request(config) {
    //1。建立axiso的例項
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    //傳送真正的網路請求
    instance(config.baseConfig)
        .then(res => {
            // console.log(res);
            config.success(res)
        })
        .catch(err => {
            // console.log(err);
            config.failure(err)
        })
}
request({
  baseConfig: {
    url: "/home/multidata"
  },
  success: res => {
    console.log(res);
  },
  failure: err => {
    console.log(err);
  }
})

第三種

因為是請求函式所以我們直接Promise

export function request(config) {
    return new Promise((resolve, reject) => {
        //1。建立axiso的例項
        const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })

        //傳送真正的網路請求
        instance(config)
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
    })

}
request({
  url: "home/multidata",
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

第四種 終極方案

因為 instance就是axios本身就是一個Promise所以直接return

export function request(config) {
    //1。建立axiso的例項
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    //傳送真正的網路請求
    return instance(config)
}
request({
  url: "home/multidata",
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

axios攔截器

請求攔截：

instance.interceptors.request.use(config => {
        console.log(config);
        // 1.config中的一些資訊不符合伺服器的要求
        // 2.每次請求時顯示動畫 請求成功隱藏
        // 3.當登陸時，如果沒有攜帶token就攔截請求，提示去登入
        return config
    })

頁面列印：

 

所以攔截了一定要return攔截內容

響應攔截

instance.interceptors.response.use(res => {
        console.log(res);
    }, err => {
        console.log(err);
    }）

頁面列印

 

 

 所以也一定要return

axios 結束！！！！！！！！！！！！！！！！！！！！！

相關文章