从第三方获取天气数据保存到本地数据库并显示在网页（二）

最新推荐文章于 2024-09-08 18:22:52 发布

qq_36288754

最新推荐文章于 2024-09-08 18:22:52 发布

阅读量607

点赞数

分类专栏：实战项目文章标签： vue.js elementui 前端 javascript

本文链接：https://blog.csdn.net/qq_36288754/article/details/126584793

版权

实战项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第二章封装的工具类

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、工具类是什么？

在设计前端页面的过程中，一些重复利用的代码可以封装成工具类，用import进行引用，可以大幅减少重复的代码

二、本项目用到的工具类

1.request.js

代码如下：

创建axios异步请求实例

const service = axios.create({

baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url

timeout: 300000 // request timeout

})

请求拦截

service.interceptors.request.use(

config => {

......

return config

},

error => {

return Promise.reject(error)

}

)

封装http请求

const http = {...}

import axios from 'axios'
import qs from 'qs'
import { getToken } from '@/utils/auth'
import store from '@/store'
// 创建axios异步请求实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // baseURL: 'api', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 300000 // request timeout
})


// 请求拦截
service.interceptors.request.use(
  config => {
    
    //判断store中实现存在token
    if (store.getters.token) {
      //读取token信息，并将token添加到headers头部信息中
      config.headers['authorization'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// // 响应式拦截
// service.interceptors.response.use(
//   response => {
//     //获取后端返回的数据
//     const res = response.data
//     // 如果后端返回的状态码不是200，提示错误信息
//     if (res.code !== 1000) {
//       Message({
//         message: res.message || 'Error',
//         type: 'error',
//         duration: 5 * 1000
//       })
//       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token
//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
//         // 重新登录
//         MessageBox.confirm('用户登录信息过期，请重新登录！', '系统提示', {
//           confirmButtonText: '登录',
//           cancelButtonText: '取消',
//           type: 'warning'
//         }).then(() => {
//           store.dispatch('user/resetToken').then(() => {
//             location.reload()
//           })
//         })
//       }
//       return Promise.reject(new Error(res.message || 'Error'))
//     } else {
//       return res
//     }
//   },
//   error => {
//     console.log('err' + error) // for debug
//     Message({
//       message: error.message,
//       type: 'error',
//       duration: 5 * 1000
//     })
//     return Promise.reject(error)
//   }
// )
//请求方法
const http = {
  //post请求提交
  post(url, params) {
    return service.post(url, params, {
      transformRequest: [(params) => {
        return JSON.stringify(params)
      }],
      headers: {
        'Content-Type': 'application/json'
      }
    })
  },
  //put请求
  put(url, params) {
    return service.put(url, params, {
      transformRequest: [(params) => {
        return JSON.stringify(params)
      }],
      headers: {
        'Content-Type': 'application/json'
      }
    })
  },
  //get请求
  get(url, params) {
    return service.get(url, {
      params: params,
      paramsSerializer: (params) => {
        return qs.stringify(params)
      }
    })
  },
  //get请求（rest风格）
  getRestApi(url, params) {
    let _params
    if (Object.is(params, undefined || null)) {
      _params = ''
    } else {
      _params = '/'
      for (const key in params) {
        console.log(key)
        console.log(params[key])
        if (params.hasOwnProperty(key) && params[key] !== null && params[key]
          !== '') {
          _params += `${params[key]}/`
        }
      }
      _params = _params.substr(0, _params.length - 1)
    }
    console.log(_params)
    if (_params) {
      return service.get(`${url}${_params}`)
    } else {
      return service.get(url)
    }
  },
  //删除请求
  delete(url, params) {
    let _params
    if (Object.is(params, undefined || null)) {
      _params = ''
    } else {
      _params = '/'
      for (const key in params) {
        // eslint-disable-next-line no-prototype-builtins
        if (params.hasOwnProperty(key) && params[key] !== null && params[key]
          !== '') {
          _params += `${params[key]}/`
        }
      }
      _params = _params.substr(0, _params.length - 1)
    }
    if (_params) {
      return service.delete(`${url}${_params}`).catch(err => {
        message.error(err.msg)
        return Promise.reject(err)
      })
    } else {
      return service.delete(url).catch(err => {
        message.error(err.msg)
        return Promise.reject(err)
      })
    }
  },
  //文件上传请求
  upload(url, params) {
    return service.post(url, params, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
  },
  //登录请求
  login(url, params) {
    return service.post(url, params, {
      transformRequest: [(params) => {
        return qs.stringify(params)
      }],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
  }
}
export default http

2.auth.js

代码如下（示例）：封装对token的增删改查

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'
/**
 * 获取token
 * @returns 
 */
export function getToken() {
  return Cookies.get(TokenKey)
}
/**
 * 设置token
 * @returns 
 */
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
/**
 * 删除token
 * @returns 
 */
export function removeToken() {
  return Cookies.remove(TokenKey)
}
/**
* 清空sessionStorage
*/
export function clearStorage(){
  return sessionStorage.clear();
}

该处使用的url网络请求的数据。