【代码片段】vue中使用axios发送请求封装

vue中使用axios发送请求封装

首先确保你的vue项目中已经安装了axios，如果没有请先安装。

$ npm install axios -S

src/request/request.js ：

import Qs from 'qs';
import axios from 'axios';

axios.defaults.timeout = 30000;
axios.defaults.baseURL = 'http://地址';

//http request 拦截器
axios.interceptors.request.use(
    config => {
        config.data._client_ = 'web';
        config.data._version_ = '1.0.0';
        // 更多参数~
        
        config.data = Qs.stringify(config.data);
        
        config.headers = {
            'Content-Type':'application/x-www-form-urlencoded'
        }

        return config;
    },
    error => {
        return Promise.reject(err);
    }
);

//http response 拦截器
axios.interceptors.response.use(
    response => {
        // 业务逻辑处理
        if (response.status == 200) {
            return response;
        }

        return response;
    },
    error => {
        return Promise.reject(error)
    }
)

export default {
    post (url, data = {}, callback, errCallback) {
        return new Promise((resolve, reject) => {
            axios.post(url, data).then(response =>{
                resolve(response);
            }, err => {
                reject(err)
            });
        }).then(response => {
            typeof(callback) == "function" && callback(response);
        }).catch(err => {
            typeof(errCallback) == "function" && errCallback(err);
        });
    }
}

main.js 中添加以下代码

import axios from 'axios'
import request from './request/request.js'

Vue.prototype.request = request;

使用

this.request.post("test", {}, function(){
    console.log('success');
}, function(){
    console.log('error');
});