AJAX

ajax.js

import axios from 'axios'
import router from './router' // 同級的路由文件router.js

axios.defaults.headers = { // 自定義請求頭

}
axios.defaults.timeout = 10000 // 超時時間(單位：毫秒)
axios.defaults.withCredentials = true // 跨域相關

// 單個請求
export const ajax = function (obj) {
  let { base, url, method = 'GET', params, data } = obj

  let baseURL = ''
  if (process.env.NODE_ENV == 'production') { // production 生產環境
    if (base == '/zw') {
      baseURL = 'http://zuowen.api.juhe.cn'
    } else {
      baseURL = 'http://apis.juhe.cn'
    }
  } else { // development 開發環境
    baseURL = base || '/api'
  }

  return axios({
    baseURL: baseURL, // 自動加在`url`前面，除非`url`是一個絕對URL 
    url: url,
    method: method,
    params: method == 'GET' ? params : null,
    data: ['POST', 'PUT', 'PATCH'].includes(method) ? data : null,

    // transformRequest: [data => { // 可在發送請求前，修改請求數據(只適用於'PUT'、'POST'、'PATCH'請求)
    //   if (data) {
    //     // 對 data 進行任意轉換處理
    //     return data
    //   }
    // }],
    // transformResponse: [res => { // 可在傳給then/catch前，修改響應數據
    //   // 對 res 進行任意轉換處理
    //   return res
    // }],
    // validateStatus: function (status) { // 根據 響應狀態碼 定義響應是 resolve 或 reject (若是validateStatus返回true或設置爲null和undefined，promise被resolve；不然promise被rejecte)
    //   return status >= 200 && status < 300
    // }
  })
}

// 併發請求
export const ajaxAll = function (arr) {
  return axios.all(arr)
}

// 請求攔截器
axios.interceptors.request.use(config => {
  // 在發送請求以前作些什麼
  return config
}, err => {
  // 對請求錯誤作些什麼
  return Promise.reject(err)
})

// 響應攔截器
axios.interceptors.response.use(res => { // 對響應數據作點什麼 
  if (res.status == 200) { // 狀態碼 200 走resolve
    return Promise.resolve(res.data)
  } else { // 狀態碼 非200 走reject
    return Promise.reject(res)
  }
}, err => { // 對響應錯誤作點什麼
  if (err.response.status) {
    switch (err.response.status) {
      case xxx: // 例如：未登陸則跳轉登陸頁面，並攜帶當前頁面路徑
        console.log(router.currentRoute.fullPath, router.currentRoute)
        router.replace({      
          path: '/login',      
          query: { redirect: router.currentRoute.fullPath } 
        })
        break
      case 404:
        // 代碼塊: 提示 404 錯誤
        break
      case 500:
        // 代碼塊: 提示 500 或其餘錯誤
        break
    }
    return Promise.reject(err.response)
  }
})
複製代碼

使用

import { ajax, ajaxAll } from '@/ajax' // @ is an alias to /src

export default {
  mounted () {
    ajax({
      base: '/zw', // 可選項，默認走'/api'
      url: `/zuowen/typeList?key=ae9e86299296235771c5a80cf220c5bb&id=1`,
    }).then(res => {
      console.log(res)
    })

    ajaxAll([
      ajax({ url: `/simpleWeather/query?city=上海&key=17c7745ae93a8565f34eedcc85b84069` }),
      ajax({
        base: '/zw',
        url: `/zuowen/typeList?key=ae9e86299296235771c5a80cf220c5bb&id=1`,
      })  
    ]).then(res => {
      console.log(res)
    })
  }
}
複製代碼

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://apis.juhe.cn',
        pathRewrite: { '^/api' : '/' },
        ws: true,
        changeOrigin: true
      },
      '/zw': {
        target: 'http://zuowen.api.juhe.cn',
        pathRewrite: { '^/zw' : '/' },
        ws: true,
        changeOrigin: true
      }
    }
  },
  publicPath: '/' // 設置打包文件相對路徑
}
複製代碼

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history', // history模式
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'index',
      // component: Index
    }
  ]
})
複製代碼