Vue項目中封裝axios

我們寫Vue項目的時候一定會有一些操作，我們會對數據進行處理，那么我們就需要自己封裝一個發送請求的函數；在請求之前，或者在響應之前，那么我們就需要處理一下:

// 導出一個可以發請求的函數
import axios from 'axios'
/**
*根據自己的項目，進行導入，需要回跳就導入router
*需要進行本都存儲，那么就導入 自己寫好的本地存儲的js
*
*/


// 創建axios實例
const instance = axios.create({
//進行配置
baseUrl:null
})
//請求攔截器
instance.interceptors.request.use(config=>{
       console.log(config)
       //請求之前做什么事情，比如加請求頭 config.header.自定義 = 'XXX'
　　　　//事情做完之后必須有返回值
　return config

},err=>Promise.reject(err))
//響應攔截器
instance.interceptors.response.use(res=>{
//響應，res為響應的數據
//我們可以捕獲數據，進行處理
try{
  //看數據結構，在點，這樣拿過來數據就可以直接用
  return res.XXX
}catcf(e){
  //捕獲到異常
  //把原來的數據原封不動拿過來
  return res
}
},err=>{
  // 響應失敗
  // 響應失敗做一些處理
　// 處理完也要返回一個promise
　return Promise.reject(err)
}

/**
*
*因為我們本意就是導出一個能夠發請求的函數，之前的處理是拿過來數據**就可以直接用
*
*/
export default (url,method,data) =>{
  // 上面我們封裝好了一個axios,那么我們用這個發請求
  instance({
   url,
   method,
   // 數組中可以寫表達式，結果必須為字符串 處理請求方式，無論大小寫，統一為小寫
   [method.toLowerCase() === 'get'? 'params' : 'data']:data

    })
}

在main.js中這么引入:

import http from '@/axios.js'

//加入到Vue的原形上，這樣可以this拿到

Vue.prototype.$http = http