Vue中使用axios的一些注意點

時間 2019-11-13

標籤 vue 使用 axios 一些注意简体版

原文原文鏈接

1. 基本使用

如今咱們的團隊使用的基本都是axios發起請求，使用方式以下
在service.js文件中返回promise對象

import config from '@/config'
import axios from 'axios'
export default{
    /*啓用停用*/
    setB2bStoreGoodsBlackUpOrDown(data) {
        return new Promise(function (resolve, reject) {
            const url = `${config.server.http}${config.server.host}/b2b-seller-admin/setStoreGoodsBlackUpOrDown`
            axios.post(url, data)
                .then(function (data) {
                    resolve(data)
                })
                .catch(function (error) {
                    reject(error)
                })
        })
    },
    /*一個接口查黑名單*/
    getListB2bCanaleStoreGoodsBlacks(data) {
        return new Promise(function (resolve, reject) {
            const url = `${config.server.http}${config.server.host}/b2b-seller-admin/page/getListCanaleStoreGoodsBlacks`
            axios.post(url, data)
                .then(function (data) {
                    resolve(data)
                })
                .catch(function (error) {
                    reject(error)
                })
        })
    },
}

在組件中調用方法，使用async await語句，外層加try catch 捕獲異常

import advService from '@B2B/services/substatAdmin/advService.js'
import scrollMixins from '@/mixins/scrollMixins.js'
import config from '@/config'
import storage from '@/utils/storage.js'

export default {
    mixins: [scrollMixins],
    data() {
        return {
            con1:false,
            con10:false,
            locationoptions: [],
            B2bAdv: {
                siteid: null,
                sort: 0,
                picUrl: "",
                openTpye: 0
            }
        }
    },
    methods: {
        async saveAdv(){
            let flag = this.Formrule()
            if (flag) {
                try {
                    this.B2bAdv.startTime = this.B2bAdv.timevalue[0].getTime().toString().substr(0, 13)
                    this.B2bAdv.endTime = this.B2bAdv.timevalue[1].getTime().toString().substr(0, 13)
                    const data = await advService.addB2bAdv(this.B2bAdv)
                    if (data.status == 200 && data.data.result) {
                        this.closeTab()

                    } else {
                        console.log(data.status.statusReason)
                        this.$customMessage("新增失敗", "error")
                    }
                }
                catch (e) {
                    this.$customMessage("新增失敗", "error")
                    console.log(e)
                }

            }
        }
    }
}

2. 自定義請求頭

在開發過程當中，咱們全部的請求如今都要走網關，並且網關須要傳遞userId和token作鑑權，若是在每一個請求中都要寫，那麼會很麻煩，這個時候咱們須要使用axios的攔截器
建立如圖所示的文件夾結構

代碼實現

/*
 * 在main.js的入口文件引入request.js
 * */

/***全局配置配置***/
// axios請求配置
import '@/utils/request/request.js'

/*
 * request.js
 * */

/*
 * @Author: 石國慶
 * @Desc: 全部axios的攔截器，默認配置均可以寫在這裏
 * @Date: 2017.11.14
 * */

import config from '@/config/index.js'
// 開關控制
if (config.setting.customHttpHeader) {
    // 這裏面無法用import
    // 添加用戶id的請求頭
    require('@/utils/request/header.js')
    // import '@/utils/request/header.js'
}

/*
 * header.js
 * */

/*
 * @Author: 石國慶
 * @Desc: axios的請求頭，用於添加網關須要的userId和token自定義請求頭
 * @Date: 2017.11.14
 * */
import globalConfig from '@/config/index.js'
import storage from '@/utils/storage.js'
import axios from 'axios'


// 這點的重點就是不能寫死，還要把這個方法導出去，由於還要兼容用ajax寫的老代碼
let func = function (config) {
    // 開關控制
    if (globalConfig.setting.permission) {
        if (storage.getItem('SGQ.global.userAuthor') != null) {
            // 這裏的config包含每次請求的內容
            config.headers.userId = storage.getItem('SGQ.global.userAuthor').id
            config.headers.token = storage.getItem('SGQ.global.userAuthor').token
            config.headers.userName = storage.getItem('SGQ.global.userAuthor').userName
            config.headers.orgId = storage.getItem('SGQ.global.userAuthor').orgId
        }
    } else {
        // 這裏的config包含每次請求的內容
        config.headers.userId = '2167676703289898'
        config.headers.token = 'eyJhbGciOiJIUzUxMiJ9.eyJrtrtriOiIyMTYwMDMyIiwiaWF0IjoxNTA5MTYwOTIzfQ.Gz6eKAkimLg7777777777777777777777777ZZF2KiX01ux7OVphfGmUT6o9q-n5eJxN0RA99evCHpfyR78gbVg'
        config.headers.userName = 'cj'
        config.headers.orgId = 1
    }
    return config
}


// 使用請求的攔截器
axios.interceptors.request.use(func, function (err) {
    return err
})

export default func

自定義請求頭問題
- 自定義請求頭遇到了一個問題，userId，token，這些參數都不是http請求頭中默認的屬性，因此瀏覽器會先向後端服務發起一個option的預請求，當服務器響應在請求頭中能夠加這些自定義屬性的時候，瀏覽器纔會發起真實的get或者post數據請求
  - 參考：http://blog.csdn.net/enter89/article/details/51205752
- 因此這個時候後端須要把跨域都設置爲*,不然會報跨域問題

3. 用攔截器統一處理錯誤信息

咱們能夠利用axios的攔截器，作統一的錯誤狀態碼處理
- 好比401狀態碼跳轉登陸頁
- token過時校驗等跳轉
代碼實現

/*
 * 新建一個error.js，而後在request.js文件中引入
 * */

/*
 * @Author: 石國慶
 * @Desc: axios的請求頭，用於添加網關須要的userId和token自定義請求頭
 * @Date: 2017.11.14
 * */
import globalConfig from '@/config/index.js'
import storage from '@/utils/storage.js'
import axios from 'axios'

let errFunc=function (error) {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                // 返回 401 清除token信息並跳轉到登陸頁面
                router.replace({
                    path: 'login',
                    query: {redirect: router.currentRoute.fullPath}
                })
        }
    }
    // 返回接口返回的錯誤信息
    return error.response.data
}


// 使用請求的攔截器
axios.interceptors.response.use(function (response) {
    return response
},errFunc)

export default errFfunc