vue項目中對axios的封裝

一、安裝

npm install axios

二、引入

一般我會在src目錄上創建一個network文件夾
network文件夾中創建一個config.js （用來封裝axios）和一個api.js（用來統一管理接口）

三、config.js 中配置axios

// 引入axios
import axios from 'axios'
// 引入router路由
import router from '@/router/index'
// 引入elementUI中loading和messageBox
import {
  Loading,
  MessageBox
} from 'element-ui'
// cookie
import {
  setCookie,
  getCookie
} from '@/common/cookie.js'

// ===== axios 配置 ======

//post請求頭的設置
//post請求的時候，我們需要加上一個請求頭，所以可以在這裏進行一個默認的設置，即設置post的請求頭爲application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

 
// 設置請求超時
axios.defaults.timeout = 600000

// 環境的切換
axios.defaults.baseURL = process.env.API_ROOT

var loadinginstace  // 這裏是loading

// http request 攔截器
axios.interceptors.request.use(
  config => {
    document.cookie.split('; ').map(item => {
      if (item.split('=')[0] === 'opadminToken') {
        config.headers.token = getCookie().opadminToken
      }
    })
    // element ui Loading方法
    loadinginstace = Loading.service({
      lock: true,
      text: '請求中……',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    return config
  },
  err => {
    MessageBox({
      title: '錯誤',
      message: '請求超時',
      callback: action => {
        loadinginstace.close()
      }
    })
    return err
  }
)

// http response 攔截器
axios.interceptors.response.use(
  response => {
    if (response.data.messageCode === 'MSG_1001') {
      setCookie('opadminToken', response.headers.token, 15)
    } else if (response.data.messageCode === 'MSG_2001') {
      router.push('/')
    }
    loadinginstace.close()
    return response
  },
  error => {
    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
      MessageBox({
        title: '錯誤',
        message: '請求超時',
        callback: action => {
          loadinginstace.close()
        }
      })
    }

    return error
  }
)

export default axios

四、api.js 中設置API接口的統一管理

// 引入配置好的axios 並命名爲request
import request from './config'

// 設置post請求
const userLoginRequest = p => request.post('/xxx/login', p) // 登錄

// 設置get請求
const queryOrder = p => request.get(`/xxx/queryOrder${p}`) // 查詢訂單詳情

// 設置get請求
const queryLogistics = p => request.get('/xxx/queryLogistics', p) // 查詢物流信息

// 設置請求的responseType
const getExcel = ids => request.get('/xxx/getMerchantAuditListExcel', {
  params: {
    ids
  },
  responseType: 'blob'
}) // 導出excel

// 導出接口
export {
userLoginRequest ，
queryOrder ，
queryLogistics ，
getExcel 
}

五、使用接口

// 引入接口方式
import {userLoginRequest ,queryOrder ,queryLogistics ,getExcel} from'@/network/api'

// post請求
userLoginRequest(){
	let data = {
		userName:'xxx',
		password:'xxx'
	}
	userLoginRequest(data).then(res=>{
		console.log(res)
	})
}

// get請求
queryOrder(){
	queryOrder(`?id=${this.id}`).then(res=>{
		console.log(res)
	})
}

// get請求
queryLogistics(){
	let data = {
		name:'xxx',
		age:'xxx'
	}
	queryLogistics({params:data}).then(res=>{
		console.log(res)
	})
}

web前端技術交流QQ羣：327814892