Vue項目中的http請求統一管理

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: '/',
    assetsPublicPath: '/',
    proxyTable: {
        /open':{
            target:"https://www.sojson.com/",  // 目標
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/open': '/open' 
            }
      }
    }
}

  this.$ajax({
              method: "post",
              url: '/open/api/weather/json.shtml'，
              params: {
                city: '北京'
              }
            })then(({data}) => {
                if (data.message === "success") {
                  console.log(data.data)
                } 
              });

https://www.jianshu.com/p/495535eb063e vue項目使用webpack-dev-server調用第三方接口跨域配置

 

接口請求封裝：http.js

import axios from 'axios'

const TIME_OUT_MS = 60 * 1000 // 默認請求超時時間

/*
 * @param response 返回數據列表
 */
function handleResults (response) {
    let remoteResponse = response.data
    var result = {
        success: false,
        message: '',
        status: [],
        errorCode: '',
        data: {
            total: 0,
            results: []
        }
    }
    if (remoteResponse.success) {
        result.data.results = remoteResponse.data
        result.data.total = remoteResponse.total
        result.success = true
    }
    if (!remoteResponse.success) {
        let code = remoteResponse.errorCode
        if (code === 400) {
            console.log('傳參錯誤')
        }
        result.errorCode = remoteResponse.errorCode
        result.message = remoteResponse.message
    }
    return result
}

function handleUrl (url) {
    url = BASE_URL + url    
// BASE_URL是接口的ip前綴，比如http:10.100.1.1:8989/
    return url
}

/*
 * @param data 參數列表
 * @return
 */
function handleParams (data) {
    return data
}

export default {
    /*
     * @param url
     * @param data
     * @param response 請求成功時的回調函數
     * @param exception 異常的回調函數
     */
    post (url, data, response, exception) {
        axios({
            method: 'post',
            url: handleUrl(url),
            data: handleParams(data),
            timeout: TIME_OUT_MS,
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
            }
        }).then(
            (result) => {
                response(handleResults(result))
            }
        ).catch(
            (error) => {
                if (exception) {
                    exception(error)
                } else {
                    console.log(error)
                }
            }
        )
    },
    /*
     * get 請求
     * @param url
     * @param response 請求成功時的回調函數
     * @param exception 異常的回調函數
     */
    get (url, response, exception) {
        axios({
            method: 'get',
            url: handleUrl(url),
            timeout: TIME_OUT_MS,
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
            }
        }).then(
            (result) => {
                response(handleResults(result))
            }
        ).catch(
            (error) => {
                if (exception) {
                    exception(error)
                } else {
                    console.log(error)
                }
            }
        )
    },
    /*
     * 導入文件
     * @param url
     * @param data
     * @param response 請求成功時的回調函數
     * @param exception 異常的回調函數
     */
    uploadFile (url, data, response, exception) {
        axios({
            method: 'post',
            url: handleUrl(url),
            data: handleParams(data),
            dataType: 'json',
            processData: false,
            contentType: false
        }).then(
            (result) => {
                response(handleResults(result, data))
            }
        ).catch(
            (error) => {
                if (exception) {
                    exception(error)
                } else {
                    console.log(error)
                }
            }
        )
    },
    /*
     * 下載文件用，導出 Excel 表格可以用這個方法
     * @param url
     * @param param
     * @param fileName 如果是導出 Excel 表格文件名后綴最好用.xls 而不是.xlsx，否則文件可能會因為格式錯誤導致無法打開
     * @param exception 異常的回調函數
     */
    downloadFile (url, data, fileName, exception) {
        axios({
            method: 'post',
            url: handleUrl(url),
            data: handleParams(data),
            responseType: 'blob'
        }).then(
            (result) => {
                const excelBlob = result.data
                if ('msSaveOrOpenBlob' in navigator) {
                    // Microsoft Edge and Microsoft Internet Explorer 10-11
                    window.navigator.msSaveOrOpenBlob(excelBlob, fileName)
                } else {
                    const elink = document.createElement('a')
                    elink.download = fileName
                    elink.style.display = 'none'
                    const blob = new Blob([excelBlob])
                    elink.href = URL.createObjectURL(blob)
                    document.body.appendChild(elink)
                    elink.click()
                    document.body.removeChild(elink)
                }
            }
        ).catch(
            (error) => {
                if (exception) {
                    exception(error)
                } else {
                    console.log(error)
                }
            }
        )
    },
    uploadFileFormData (url, data, response, exception) {
        axios({
            method: 'post',
            url: handleUrl(url),
            data: data,
            timeout: TIME_OUT_MS,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(
            (result) => {
                response(handleResults(result))
            }
        ).catch(
            (error) => {
                if (exception) {
                    exception(error)
                } else {
                    console.log(error)
                }
            }
        )
    }
}

接口api統一封裝： ports.js

export default {
    manage: {
        register: '/manage/company/register', // 注冊接口
        login: '/manage/company/login', // 登錄
        logout: '/manage/company/loginOut' // // 退出
    },
    pwd: {
        sendEmail: '/manage/user/sendEmail',
        resetPwd: '/manage/user/passwordReset'
    }
}

引入和定義方式：main.js中

import http from 'http.js'
import ports from 'ports'
 Vue.prototype.http = http
 Vue.prototype.ports = ports

使用 方式：組件內

             this.http.post(this.ports.manage.login, {
                    userAccount: 'test',
                    userPassword: '111111',
                    cert: '1111111111'
                }, res => {
                    if (res.success) {
                       // 返回正確的處理
                    } else {
                      // 返回錯誤的處理 
                    }
                })

https://www.jianshu.com/p/72d911b6d61d vue-cli項目中axios接口封裝以及api的統一管理