Vue项目搭建学习。使用 axios 并且二次封装

概述

上一次。写了如何搭建Vue项目并且使用element-ui这个组件。然后这次就记录一下如何使用axios 进行前后交互。 本来之前使用的是vue-resource 但是我看网上博客都说，vue推荐使用axios 了。然后就改成了axios！

安装

安装还是老样子。直接使用cnpm命令

cnpm i axios -S

顺便提一下。可以去package.json这个文件下，去看看具体安装了什么包

安装好之后。 也不用配置。直接引入

直接使用二次封装。创建一个http-axios文件夹。在创建一个http-axios.js文件

import axios from 'axios';

axios.defaults.timeout = 5000;
axios.defaults.baseURL = 'http://localhost:10086/cms'; //填写域名

//http request 拦截器
axios.interceptors.request.use(
    config => {
        config.data = JSON.stringify(config.data);
        config.headers = {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization':localStorage.getItem("sessionId")
        }
        return config;
    },
    error => {
        return Promise.reject(err);
    }
);

//响应拦截器即异常处理
axios.interceptors.response.use(response => {
    return response
}, err => {
    if (err && err.response) {
        switch (err.response.status) {
            case 400:
                console.log('错误请求')
                break;
            case 401:
                console.log('未授权，请重新登录')
                break;
            case 403:
                console.log('拒绝访问')
                break;
            case 404:
                console.log('请求错误,未找到该资源')
                break;
            case 405:
                console.log('请求方法未允许')
                break;
            case 408:
                console.log('请求超时')
                break;
            case 500:
                console.log('服务器端出错')
                break;
            case 501:
                console.log('网络未实现')
                break;
            case 502:
                console.log('网络错误')
                break;
            case 503:
                console.log('服务不可用')
                break;
            case 504:
                console.log('网络超时')
                break;
            case 505:
                console.log('http版本不支持该请求')
                break;
            default:
                console.log(`连接错误${err.response.status}`)
        }
    } else {
        console.log('连接到服务器失败')
    }
    return Promise.resolve(err.response)
})


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/

export function patch(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.patch(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/

export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data)
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err)
            })
    })
}

这个是直接二次封装好的代码。有需要的可以根据这个修改一下。

打开main.js文件

引入这个js文件

// 这个是按需要引入。如果你使用post请求。就可以只引入post就可以了
import {post} from './http-resource/http-axios'
// 这个是对参数的一个初始化把算是。如果没有你在后台接收到的参数就是null
// 这个qs 本来就是axios的模块。不需要安装
import Qs  from 'qs'
// 将post 和 Qs 注册为全局变量
Vue.prototype.$post = post;
Vue.prototype.qs = Qs

测试使用一下

login(){
    console.log(this.username + this.password)
    let data = {
        hehe:"呵呵",
        username:this.username,
        password:this.password,
        code:this.val
    }
   this.$post('v_login.do',this.qs.stringify(data)).then( data => {
        console.log(data)
    })
}