技術標籤：vueaxiosvue.js

記錄一下vue中對axios的封裝， 以便於日後複製貼上用，沒有用vuex

下邊上程式碼：

根目錄建一個request資料夾，建一個http.js檔案

因為是自己開發 所以api沒用上 沒有進行模組化管理

import axios from 'axios' // 引入axios
// import store from '../store/index' // 引入Vuex
// import router from '../router' // 引入vue-router
import { Message } from 'element-ui' //區域性引入UI框架元件
import
 
 Qs from 'qs'
// 環境的切換
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = '/api' // 開發環境
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = '' // 除錯環境
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://apis.seajc.com/36client' // 生產環境
 

}

// 請求超時時間
axios.defaults.timeout = 20000;

// 請求攔截器
axios.interceptors.request.use(
    config => {
      // console.log("請求資料",config.data)
        // const token = getCookie('名稱');注意使用的時候需要引入cookie方法，推薦js-cookie
        if(config.method == "get"){
          if(sessionStorage.getItem
 
("token")){
            config.params.tk = sessionStorage.getItem("token")
          }
        }
        if(config.method == "post"){
          if(sessionStorage.getItem("token")){
            config.data.tk = sessionStorage.getItem("token")
          }
        }
        // console.log("請求資料111",config.data)
        config.data = Qs.stringify(config.data);
        config.headers = {
          'Content-Type':'application/x-www-form-urlencoded'
        }
        // if(token){
        //   config.params = {'token':token}
        // }
        return config;
    },
    error => {
        return Promise.error(error)
    }
)

// 響應攔截器
axios.interceptors.response.use(
  // 服務碼是200的情況
  response => {
    // console.log("這是返回",response.data.success)
    if (response.status === 200) {
        switch (response.data.success) {
            // 未登入
            case false:
            Message({
                message: response.data.message,
                type: 'error',
                offset:380,
                duration:1000
            });
            break;
        }
        return Promise.resolve(response);
    } else {
        return Promise.reject(response)
    }
  },
  // 伺服器狀態碼不是200的情況
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 404請求不存在
        case 404:
          Message({
            message: '網路請求不存在',
            type: 'error',
            offset:380,
            duration:1000
          });
          break;
        // 其他錯誤，直接丟擲錯誤提示
        default:
          Message({
            message: error.response.data.message,
            type: 'error',
            offset:380,
            duration:1000
          });
      }
      return Promise.reject(error.response)
    }
  }
)

/**
 * get方法，對應get請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 * @param {Object} config [請求時url後直接加的引數，預設為空]
 */
export function get(url, params,config = {add: '' }) {
  return new Promise((resolve, reject) => {
    axios.get(url,{
      params: params
    },config).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
/**
 * post方法，對應post請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的引數]
 * @param {Object} config [是否啟用multipart/form-data格式請求，預設為false]
 */
export function post(url, params,config = {isUpload: false }) {
  return new Promise((resolve, reject) => {
    axios.post(url, params,config)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

在main.js中引入：

import {get,post} from './request/http';
Vue.prototype.$get = get
Vue.prototype.$post = post

應用：

this.$post("地址",{
    引數
 }).then(res=>{
     console.log(res)
 }).catch(err=>{
     console.log(err)
 })