Vue使用axios發送請求並實現簡單封裝的示例詳解

npm install axios --save

// 引入axios ---------------------------------------------------
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.prototype.$axios.defaults.baseURL = 'http://127.0.0.1:8000/' // 請求根路徑
// -------------------------------------------------------------

this.$axios.get('index').then(res => {
  // 返回數據在 res.data 中
})

this.$axios.post('login', {user:"admin", pwd:"123"}).then(res => {
   // 返回數據在 res.data 中
})

var res1 = this.$axios.get('index')
var res2 = this.$axios.post('login', {user:"admin", pwd:"123"})
this.$axios.all([res1, res2]).then(this.$axios.spread(res1, res2) => {
  // 兩個請求的返回結果在 res1 和 res2 中
})

// 引入
import Axios from 'axios'
import { Message } from 'element-ui'   	// 需要裝個 element-ui，錯誤提示界面友好一些

// 前端存在 localStorage 中的 token
const token = localStorage.getItem('token')

// 實例化
const request = Axios.create({
  baseURL: "http://127.0.0.1:8000/",  	// 服務根路徑
  timeout: 200000,						// 請求過期時間
  headers: {
    Authorization: token    			// token 插入請求頭給後端校驗
  }
})

// 攔截後端返回的請求
request.interceptors.response.use(res => {
  if (res.status !== 200) {
    Message.error("something err...") 	// 返回錯誤的提示信息
  }
  return res.data     					// 隻取 res 中的 data，後續取值不需要再寫一層 data 瞭  
})

// 導出
export default request

// 引入axios ---------------------------------------------------
import request from './request'
Vue.prototype.$http = request
// -------------------------------------------------------------

this.$http.get('index').then(res => {
  // 返回數據在 res.data 中
})

this.$http.post('login', {user:"admin", pwd:"123"}).then(res => {
   // 返回數據在 res.data 中
})

var res1 = this.$http.get('index')
var res2 = this.$http.post('login', {user:"admin", pwd:"123"})
this.$http.all([res1, res2]).then(this.$http.spread(res1, res2) => {
  // 兩個請求的返回結果在 res1 和 res2 中
})