快捷導(dǎo)航

可能是vue中使用axios最詳細(xì)教程

更新時(shí)間：2022年08月15日 10:05:29 作者：醉夢(mèng)者

Axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質(zhì)上也是對(duì)原生XHR的封裝,只不過(guò)它是Promise的實(shí)現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關(guān)于vue中使用axios最詳細(xì)教程的相關(guān)資料,需要的朋友可以參考下

安裝：

npm axios from 'axios'

較科學(xué)的封裝好的axios：（new-axios.js）

import?axios?from?'axios'
import?{?Notify?}?from?'vant';
//?import?Vue?from?'vue'
//?import?store?from?'@/store'? // 我此項(xiàng)目沒(méi)有用到vuex，所以vuex代碼的都注釋了，需要的自己打開(kāi)使用

//?import?{ACCESS_TOKEN}?from?'@/store/mutation-types'

//?創(chuàng)建?axios?實(shí)例
const?requests?=?axios.create({
??baseURL:?process.env.VUE_APP_API,?// 基礎(chǔ)url,如果是多環(huán)境配置這樣寫，也可以像下面一行的寫死。
　　// baseURL: 'http://168.192.0.123',
??timeout:?6000?//?請(qǐng)求超時(shí)時(shí)間
})

?
// 錯(cuò)誤處理函數(shù)
const?err?=?(error)?=>?{
??if?(error.response)?{
????const?data?=?error.response.data
????//?const?token?=?Vue.ls.get(ACCESS_TOKEN)
????if?(error.response.status?===?403)?{
????????Notify({?type:?'danger',?message:?data.message||data.msg?});
????}
????if?(error.response.status?===?401)?{
????????Notify({?type:?'danger',?message:?'你沒(méi)有權(quán)限。'?});
??????//?if?(token)?{
??????//???store.dispatch('Logout').then(()?=>?{
??????//?????setTimeout(()?=>?{
??????//???????window.location.reload()
??????//?????},?1500)
??????//???})
??????//?}
????}
??}
??return?Promise.reject(error)
}

//?request?interceptor(請(qǐng)求攔截器)
requests.interceptors.request.use(config?=>?{
//???const?token?=?Vue.ls.get(ACCESS_TOKEN)
??const?token?=?localStorage.getItem('token')
??if?(token)?{
????config.headers['token']?=?token?//?讓每個(gè)請(qǐng)求攜帶自定義?token?請(qǐng)根據(jù)實(shí)際情況自行修改
??}
??return?config
},?err)

//?response?interceptor（接收攔截器）
requests.interceptors.response.use((response)?=>?{
??const?res?=?response.data
??if?(res.code?!==?0&&res.code!==200)?{?
????Notify({?type:?'danger',?message:?res.message||res.msg?});
????//?401:未登錄;
????if?(res.code?===?401||res.code?===?403||res.code===999)?{
??????Notify({?type:?'danger',?message:?'請(qǐng)登錄'});
????}
????return?Promise.reject('error')
??}?else?{
????return?res
??}
},?err)

export?default?{
??requests
}

main.js 引入，添加到vue原型

import requests from '@s/basejs/new-axios.js'   // 記得改為你的路徑
Vue.prototype.rq = requests  // 此處命名為rq,你可以改

使用

this.rq.get('/api/product/get?productChannelId='+this.productChannelId).then(res=>{
    console.log(res)
})

// 傳對(duì)象參數(shù)
// get請(qǐng)求記得加params
this.rq.get('/api/product/get,{params:{name:'abc'}}).then(res=>{
    console.log(res)
})

this.rq.post('/api/product/get,{name:'abc'}).then(res=>{
    console.log(res)
})

以下步驟一般不需要

開(kāi)發(fā)環(huán)境如果要跨域，解決跨域問(wèn)題（設(shè)置代理）：vue-cli 3.0的在 package.json 同級(jí)目錄新建一個(gè) vue.config.js 文件，加入下面代碼，其他版本找到配置文件的devServer加入代碼

：

module.exports = {
    //axios域代理，解決axios跨域問(wèn)題
    baseUrl: '/',
    devServer: {
        proxy: {
            '': {
                target: 'http://192.168.0.108:8090',
                changeOrigin: true,
                ws: true,
                pathRewrite: {

                }
            }
        }
    }
}

修改完后記得重啟項(xiàng)目應(yīng)用配置