vue項目，封裝api並使用

封裝api

index.js

let uploadBase = ''

if(process.env.NODE_ENV === 'production'){
    uploadBase = 'https://cloud.inschos.com'
}

const ApiSetting = {
  // 賬號相關
  account_login: {url: '/api/account/web/account/login/company',method: 'post'}, 
}

export default ApiSetting

axios.js

import Axios from 'axios'
import { MessageBox } from 'element-ui'

Axios.defaults.withCredentials = true

Axios.interceptors.response.use(
    data => {
        if (data.status && data.status === 200 && data.data.code !== 200) {
            if(data.data.code === 502){
                location.href = '/login'
            }
            // MessageBox.alert(data.data.message)
            return Promise.reject(data.data.message[0].details, data)
        }
        return data
    },
    err => {
        if (err.response.status === 404) {
            //			MessageBox.alert('請求無效', '提示')
        } else if (err.response.status === 403) {
            MessageBox.alert('權限不足,請聯系管理員!', '提示')
        } else if (err.response.status === 502) {
            location.href = '/login'
        } else {
            MessageBox.alert('服務器錯誤!', '提示')
        }
        return Promise.reject(err)
    }
)

function errorState(err) {
}

function successState(res) {
}

const httpServer = (opts, data) => {
    const token = localStorage.getItem('token')
    const PUBLIC = `?token=${token}`
    let httpDefaultOpts = ''
    var host = `${process.env.HOST}`
    var prot = `${process.env.PORT}`
    var base = host +(prot?":"+prot:"")
    if (opts.method === 'post') {
        httpDefaultOpts = {
            method: opts.method,
            url: `${base}${opts.url}${PUBLIC}`,
              headers:{
						'Content-Type':'text/html;charset=utf-8'
					},
            //    timeout: 10000,
            data: data
        }
    } else {
        httpDefaultOpts = opts
    }

    return new Promise(function (resolve, reject) {
        Axios(httpDefaultOpts).then(
            (res) => {
                successState(res)
                resolve(res)
            }
        ).catch(
            (err) => {
                errorState(err)
                reject(err)
            }
        )
    })
}

export default httpServer

使用封裝好的api

import ApiSetting from "@/api"; //首先要引入
//方法
 submitForm() {
         this.$http(ApiSetting.account_login, this.ruleForm2)
           .then(res => {
             if (res.data.code == 200) {
               var data = res.data.data;
               Object.assign(data, this.ruleForm2);//這是合並對象
             }
           })
           .catch(err => {
             this.$notify({
               title: "操作提示",
               message: err,
               type: "error"
             });
           });
    },

安裝axios

1.需要在命令行里安裝
npm install axios
2.需要在main.js里引入
import axios from 'axios'
Vue.prototype.$http = axios
3.因為你已經把$http掛載到vue實例上了，所以頁面調用的時候就可以直接this.$http了