Vue之封装axios

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_39045645/article/details/100191818

第一步，首先安装axios，这里推荐局部安装

npm i -D axios

第二步，在src目录下创建request文件夹，然后在里面创建两个文件http.js、api.js

http.js

import axios from 'axios'

// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = ''
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = ''
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = ''
}
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'

// // 请求拦截器
// axios.interceptors.request.use(
//   config => {
//     // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
//     // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
//     const token = store.state.token
//     token && (config.headers.Authorization = token)
//     return config
//   },
//   error => {
//     return Promise.error(error)
//   })
//
// // 响应拦截器
// axios.interceptors.response.use(
//   response => {
//     if (response.status === 200) {
//       return Promise.resolve(response)
//     } else {
//       return Promise.reject(response)
//     }
//   },
//   // 服务器状态码不是200的情况
//   error => {
//     if (error.response.status) {
//       switch (error.response.status) {
//         // 401: 未登录
//         // 未登录则跳转登录页面，并携带当前页面的路径
//         // 在登录成功后返回当前页面，这一步需要在登录页操作。
//         case 401:
//           router.replace({
//             path: '/login',
//             query: { redirect: router.currentRoute.fullPath }
//           })
//           break
//         // 403 token过期
//         // 登录过期对用户进行提示
//         // 清除本地token和清空vuex中token对象
//         // 跳转登录页面
//         case 403:
//           Toast({
//             message: '登录过期，请重新登录',
//             duration: 1000,
//             forbidClick: true
//           })
//           // 清除token
//           localStorage.removeItem('token')
//           store.commit('loginSuccess', null)
//           // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
//           setTimeout(() => {
//             router.replace({
//               path: '/login',
//               query: {
//                 redirect: router.currentRoute.fullPath
//               }
//             })
//           }, 1000)
//           break
//         // 404请求不存在
//         case 404:
//           Toast({
//             message: '网络请求不存在',
//             duration: 1500,
//             forbidClick: true
//           })
//           break
//         // 其他错误，直接抛出错误提示
//         default:
//           Toast({
//             message: error.response.data.message,
//             duration: 1500,
//             forbidClick: true
//           })
//       }
//       return Promise.reject(error.response)
//     }
//   }
// )

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

api.js

import { get, post } from './http'
export const api1 = p1 => get('https://xxx/v5/weather?city=qingdao&key=1b47b16e4aa545eaa55a66f859ac0089', p1)
export const api2 = p2 => get('https://xxx/v5/weather?city=taian&key=1b47b16e4aa545eaa55a66f859ac0089', p2)
export const api3 = p => post('https://xxx/svserver/upload/', p)

第三步，应用到组件

<template>
  <div class="hello">
    <button @click="api1">青岛</button>
    <button @click="api2">泰安</button>
    <input type="file" accept="video/*" name="video" @change="api3()" id="file1">
  </div>
</template>

<script>import { api1, api2, api3 } from '@/request/api'// 导入我们的api接口
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
  // get方法
    api1 () {
      // 调用api接口，并且提供了两个参数
      api1({
        type: 0,
        sort: 1
      }).then(res => {
        // success
        console.log(res)
      }).catch((error) => {
        // error
        console.log(error)
      })
    },
    api2 () {
      api2({
        type: 0,
        sort: 1
      }).then(res => {
        // success
        console.log(res)
      }).catch((error) => {
        // error
        console.log(error)
      })
    },
    // post方法
    api3 () {
      let file = document.getElementById('file1').files[0]
      let data = new FormData()
      data.append('video', file)
      console.log(data)
      api3(data).then(res => {
        // success
        console.log(res)
      }).catch((error) => {
        // error
        console.log(error)
      })
      
      //原始的post方法
      // this.$axios({
      //   url: 'https://www.maomin.club/svserver/upload/',
      //   method: 'POST',
      //   headers: {
      //     'Content-Type': 'multipart/form-data'
      //   },
      //   data: data
      // }).then((response) => {
      //   // success
      // })
      //   .catch((error) => {
      //     // error
      //     console.log(error)
      //   })
    }
  }
}
</script>