axios在vue裏的封裝

前言： 隨着公司移動端業務愈來愈少，大部分都是web端工做。由於以前也自學過一點html5，因此此次也是打算真的把web學會。固然了我首選了vue。這篇文章要說的就是我對axios在vue裏的使用封裝。

固然首先是安裝axios及引用它。這裏不是咱們講的內容。

1、首先是咱們的接口文檔api.js

這裏我新建了service文件夾，新建api.js文件，這裏我只定義了url和請求方法。api.js方法以下：

const CONTACT_API = {

    //獲取首頁新聞地址
    getHomeList: {
        method: 'get',
        url: '/brainofficial/news/getNewsPage'
    }
    
}

export default CONTACT_API
複製代碼

2、第二步就是網絡請求封裝http.js

http.js

import axios from 'axios'
import service from '../service/index.js'


//設置baseURL及超時時長
let instance = axios.create({
    baseURL: 'https://www.suiren.com',
    timeout: 10000
})


//定義包裹請求方法的容器
const Http = {}

//對api文檔進行循環，並把每一個方法都賦值到Http上去
for (let key in service) {
    //這裏變量api就至關於getHomeList對象，包含了url 和method
    let api = service[key]
    //將方法賦值到Http裏去(這裏使用async的目的是爲了，可能請求2個方法，方法2要在方法1請求完後再請求)
    Http[key] = async function ( params,//要傳遞的參數 isFormData = false,//是表單仍是json上傳 ) {
        
        //請求網址
        let url = api.url
        
        //定義axios的config配置參數
        let config = {}
        let newParams = {}

        //判斷content-type是否爲表單形式，是否須要拼接在url上
        if (params && isFormData) {//若是有參數且爲表單格式的話，把參數轉換一下
            newParams = new FormData()
            for (let i in params) {
                newParams.append(i, params[i])
            }
        } else {
            newParams = params
        }

        let response = {}
        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') {
            try {
                response = await instance[api.method](api.url, newParams, config)
            } catch (error) {
                response = error
            }

        } else if (api.method === 'delete' || api.method === 'get') {
            config.params = newParams
    
            try {
                response = await instance[api.method](api.url, config)
            } catch (error) {
                response = error
            }
        }

        return response//返回響應值

    }

}


// 攔截器的添加
instance.interceptors.request.use(config => {
    //發生請求前作什麼(這個至關於移動端要展現loading圈同樣)
    return config
}, err => {
    //請求錯誤(前端操做是，取消loading圈，並會彈出一個網絡異常的提示)
    return Promise.reject(err)
})

//響應攔截器
instance.interceptors.response.use(res => {
    //請求成功了(前端作法是取消loading圈)|
    return res.data
}, err => {
    //請求失敗(前端作法是取消loading圈給提示)
    return Promise.reject(err)
})




export default Http

複製代碼

3、使用

在使用以前，咱們要將其掛載在咱們的vue實例上。這裏我使用的是vue3,在main.js以下：

import Http from './service/http'

//把Http掛載到vue的實例上
const app = createApp(App);
app.config.globalProperties.$Http = Http;
app.use(store).use(router).mount('#app')
複製代碼

進行網絡請求以下：

async getList() {
      var res = await this.$Http.getHomeList()
      console.log(res)
    }

複製代碼

還記得封裝的時候咱們是定義了的參數的，能夠傳參還有是不是表單形式，若是這裏什麼都沒傳，那麼表明的都是默認值。

這裏有人可能問了，若是網頁須要登陸，要傳遞token怎麼辦？

• 方法1：能夠經過攔截器添加

• 方法2：直接利用vuex存儲token，在封裝的時候判斷有值就添加

• 方法3：固然也能夠用過傳遞參數天界如：

async getList() {
      var res = await this.$Http.getHomeList({value:xxx})
      console.log(res)
    }
複製代碼

那麼在封裝http.js裏

let config = {
            headers:{
                token:""
            }
        }

config.headers.token = params.value
複製代碼

總結：

這裏是我初學對axios在vue裏的使用的封裝的理解。axios在vue裏封裝，應該是針對各自項目進行不一樣的封裝和修改。有更好建議的同窗歡迎瀏覽、