vue axios配置

首先安装，使用了vue-axios

npm install axios --save
npm install vue-axios --save

其次在src下面新建一个网络请求文件夹，用来放请求地址和网络请求封装文件等

url.js中放项目请求地址导出即可

const onlineUrl = ''
const testUrl = 'http://160.16.98.97:8081'

export default URL

在axios.js中我们来封装，这里采用一种抽离封装的方式来写

import URL from './url.js' //项目的请求地址
import Vue from 'vue'
import vueAxios from 'vue-axios'
import axios from 'axios'
Vue.use( vueAxios, axios )

//配置请求头，这里设置了前端proxyTable跨域，所以是/api，正式上线改成URL.onlineUrl即可
var instance = axios.create({
    baseURL: '/api',
    timeout: 1000,
    headers: {
        'Content-type': 'applicaiton/x-www-form-urlencoded'
    }
})

export default class Api {

    static instance = instance

    static baseRequest( url, method = 'get', data = {} ) {
        switch ( method.toLocaleLowerCase() ) {
            case 'get':
                return this.instance.get( url, data )
                        .then( res => this.onSuccess(res), res => this.onFail(res))
                break;
            case 'post':
                return this.instance.post( url, data )
                        .then( res => this.onSuccess(res), res => this.onFail(res))
                break;
            default:
                break;
        }
    }

    static onSuccess(res) {
        return new Promise(( resove, reject) => {
            if ( res.code == 1) {
                resove(res.data)
            } else {
                reject(res.message)
            }
        })
    }

    static onFial(res) {
        return new Promise(( resove, reject ) => {
            reject(res.message)
        })
    }

    static addToCart(data) {
        return this.baseRequest( '/api/signin', 'post', data)
    }
}

接下来在main.js中做全局配置，将写好的类挂载在vue原型上

import Api from './api/axios.js'
Vue.prototype.$api = Api

在component中就可以使用了（上面axios中我们添加了一个addToCart请求）

methods: {
    addToCart() {
        var data = { userId: 'deven', password: '123456'}
        this.$api.addToCart(data).then(
            res => {
                console.log('success') 
            },
            err => {
                console.log('fail')
            }
        ).catch(res => {
            console.log(res)
        })
    }
}

跨域配置，在config的index.js中

proxyTable: {
        '/api': {
            target: 'http://160.16.98.97:8081',
            changeOrigin: true,
            pathRewrite: {'^/api' : ''}
        }
    },

这样一个请求就基本完成了。