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
    }
  ]
})
复制代码