Vue之封裝二次axios

第一步，首先安裝axios，這里推薦局部安裝

npm i -D axios



第二步，在src目錄下創(chuàng)建request文件夾，然后在里面創(chuàng)建兩個(gè)文件http.js、api.js

http.js

import axios from 'axios'
// 環(huán)境的切換
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '' // 開發(fā)環(huán)境
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = '' // 調(diào)試環(huán)境
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = '' // 生產(chǎn)環(huán)境
}
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'

// 請(qǐng)求攔截器
axios.interceptors.request.use(
  config => {
    // 每次發(fā)送請(qǐng)求之前判斷是否存在token，如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，不用每次請(qǐng)求都手動(dòng)添加了
    // 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷
    // const token = this.$store.state.Authorization
    // token && (config.headers.Authorization = token)
    // return config
    if (localStorage.getItem('Authorization')) {
          config.headers.Authorization = localStorage.getItem('Authorization');
        }
    return config;
  },
  error => {
    return Promise.error(error)
  })

// 響應(yīng)攔截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服務(wù)器狀態(tài)碼不是200的情況
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登錄
        // 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑
        // 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作。
        case 401:
          this.$router.replace({
            path: '/Login',
            query: { redirect: this.$router.currentRoute.fullPath }
          })
          break;
        // 403 token過期
        // 登錄過期對(duì)用戶進(jìn)行提示
        // 清除本地token和清空vuex中token對(duì)象
        // 跳轉(zhuǎn)登錄頁面
        case 403:
          this.$toast({
            message: '登錄過期，請(qǐng)重新登錄',
            duration: 1000,
            forbidClick: true
          })
          // 清除token
          localStorage.removeItem('Authorization')
          this.$store.commit('changeLogin', null)
          // 跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面
          setTimeout(() => {
            this.$router.replace({
              path: '/Login',
              query: {
                redirect: this.$router.currentRoute.fullPath
              }
            })
          }, 1000)
          break;
        // 404請(qǐng)求不存在
        case 404:
          this.$toast({
            message: '網(wǎng)絡(luò)請(qǐng)求不存在',
            duration: 1500,
            forbidClick: true
          })
          break;
        // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
        default:
          this.$toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true
          })
      }
      return Promise.reject(error.response)
    }
  }
)

/**
 * get方法，對(duì)應(yīng)get請(qǐng)求
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 */
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方法，對(duì)應(yīng)post請(qǐng)求
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 */
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)



第三步，應(yīng)用到組件

<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'// 導(dǎo)入我們的api接口
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
  // get方法
    api1 () {
      // 調(diào)用api接口，并且提供了兩個(gè)參數(shù)
      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方法
          let postData = {
          lookid: id,
          look: num
        }
        api3(postData).then(res => {
          // success
          console.log(res)
        }).catch((error) => {
          // error
          console.log(error)
        })
      
      //原始的post方法
      // this.$axios({
      //   url: 'https://xxx/svserver/upload/',
      //   method: 'POST',
      //   headers: {
      //     'Content-Type': 'multipart/form-data'
      //   },
      //   data: data
      // }).then((response) => {
      //   // success
      // })
      //   .catch((error) => {
      //     // error
      //     console.log(error)
      //   })
    }
  }
}
</script>


作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路