关于项目数据请求

在 src 下面新建专门请求的 api ，里面放一个 request.js

新建 request.js文件

request.js （几乎一样，有待验证）

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

// 创建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、观察后台给的接口，尤其是红框内
2、在封装请求的js文件中，url一行，一一对应：

请求数据的weather.js文件.png 后台接口url传参.png

3、在vue页面调用时：

中间的obj其实没有用到