美文网首页
Vue 使用axios

Vue 使用axios

作者: 一学就会的小天才 | 来源:发表于2020-12-30 10:02 被阅读0次

1、下载axois

 npm install axios  --save

2、在src文件夹在创建http.js文件

import Vue from 'vue';
import axios from 'axios';

// 如果你要用到session验证码功能,让请求携带cookie
axios.defaults.withCredentials = true;

//http request 拦截器
axios.interceptors.request.use(
    config => {
        var token = sessionStorage.getItem('token');
        config.data = JSON.stringify(config.data);
        config.headers = {
            'Content-Type':'application/json;charset=UTF-8',
          }
        if (token) {
            config.params = {
                'token': token
            }
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

//http response 拦截器
axios.interceptors.response.use(
    response => {
        // 拿到接口返回值,做逻辑处理
        if (response.data.state || response.data.code == '0') {
            return response.data;
        } else {
            var msg = response.data.msg;
            return Promise.reject(msg) // 抛出错误
        }
    },
    error => {
        return Promise.reject(error)
    }
);

/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url, paramenter = {}) {
    return new Promise((resolve, reject) => {
        axios.get(url, { params: paramenter })
            .then(response => {
                resolve(response);
            })
            .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);
            }, err => {
                reject(err)
            })
    })
}


// Vue.prototype.$http = axios;
//定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$get = get;

3、在main.js 引入http.js文件

import './http.js'; // http请求

相关文章

网友评论

      本文标题:Vue 使用axios

      本文链接:https://www.haomeiwen.com/subject/tmlfoktx.html