axios封裝(處理token跟get中Content-Type的請求問題)

axios封裝

import axios from 'axios'  //引入axios
import store from '@/store/index'  //引入store
//此處引入router可做請求時錯誤信息跳轉或login處理問題
import router from '@/router'  //引入router

axios.defaults.baseURL = process.env.baseURL;
axios.defaults.headers['Content-Type'] = 'application/json';

// http request 攔截器
axios.interceptors.request.use(
    config => {
        console.log(config);
        if (store.state.token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
            config.headers.Authorization = store.getters.token  //請求頭加上token
        }
        if (config.method == 'get') {
            //axios中get請求會移除Content-Type，此處是繞過判斷給get添加header
            config.data = true;
            config.headers['Content-Type'] = 'application/json'
        }
        return config
    },
    err => {
        return Promise.reject(err)
    })

// http response 攔截器
axios.interceptors.response.use(
    response => {
        //攔截響應，做統一處理 
        return response
    },
    //接口錯誤狀態處理，也就是說無響應時的處理
    error => {
        return Promise.reject(error) // 返回接口返回的錯誤信息
    })

引用

在main,js中

//引入axios
import axios from 'axios'
//引入axios.js文件,注意路徑
import './service/axios'
//掛載到原型鏈上
Vue.prototype.$ajax = axios;

調用

//可在axios.js中做統一的錯誤處理

//post請求

//不帶參
this.$ajax.post('/******').then(res=>{})

//帶參
let params={a:1,b:2};
this.$ajax.post('/******',params).then(res=>{})

//get請求

//不帶參
this.$ajax.get('/******').then(res=>{})

//帶參
let params={a:1,b:2};
this.$ajax.get('/******',{params:params}).then(res=>{})

//es6對象可簡寫
this.$ajax.get('/******',{params}).then(res=>{})

站在前人的肩膀上