在 src 下面新建專門請求的 api ，里面放一個 request.js

新建 request.js文件

request.js （幾乎一樣，有待驗證）

import axios from 'axios'
import router from '@/router'
import { Message } from 'element-ui'

// 創(chuàng)建axios實例
const service = axios.create({
  // baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 10000 // 請求超時時間
})

// axios 請求攔截器，有token值則配置上token值
service.interceptors.request.use(
  config => {
    let token = window.localStorage.getItem('accessToken')
    if (token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token和Authorization
      config.headers['Token'] = token
      config.headers['Authorization'] = token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })
// axios 服務器響應攔截器，這里攔截401錯誤，并重新跳入登頁重新獲取token
service.interceptors.response.use(
  response => {
    switch (response.data.code) {
      case '1000001':
        // 這里寫清除token的代碼
        window.localStorage.removeItem('accessToken')
        router.replace({
          path: 'login'
        })
        Message.error('code已失效,請重新登錄')
        break
      case '1000002':
        router.replace({
          path: '/'
        })
        Message.error('您沒有權限操作此功能！')
        break
    }
    return response
  },
  error => {
    if (error.response) {
      // console.log(99999);
      // console.log(error.response);
      // console.log(99999);
      // switch (error.response.status) {
      //   case 401:
      //     // 這里寫清除token的代碼
      //     router.push({
      //       path: 'login',
      //       query: {redirect: router.currentRoute.fullPath}   //登錄成功后跳入瀏覽的當前頁面
      //     })
      // }
    }
    return Promise.reject(error.response.data)
  })
export default service

比方在 api 文件夾中新建一個專門請求氣象的 weather.js，則里面代碼第一行首先引入剛才的 request 請求，如圖：

請求氣象站的js文件

weather.js中的代碼如下：

import request from '@/api/common/request'

const WeatherApi = {
    create: function() {
        const obj = {}
        obj.getWeatherPcData = function(url, data, pageNum, pageSize) {
            return request({
                url: url + '/IotWeatherHis/list/page' + '/' + pageNum + '/' + pageSize,
                method: 'post',
                data
            })
        }
        return obj
    }
}.create()

export default WeatherApi

后臺接口：

主要看這個

快速搭建好請求的js

1、觀察后臺給的接口，尤其是紅框內(nèi)
2、在封裝請求的js文件中，url一行，一一對應：

請求數(shù)據(jù)的weather.js文件.png

后臺接口url傳參.png

3、在vue頁面調(diào)用時：

中間的obj其實沒有用到