axios的在请求头带上token简单封装

在请求头带上token

1.导入axios

$ npm install axios

2.在文件中引入

import axios from 'axios';

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 全局更改
import qs from 'qs';// 配合qs模块转化post请求的参数

3.get和post请求

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

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios(
     {
      url:url, 
      method:'get',
      baseURL:process.env.VUE_APP_BASE_API,
      data:data,
      headers: {'mp-Token': 123},//设置header信息
    }    
    )
      .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({
      url:url, 
      method:'post',
      baseURL:process.env.VUE_APP_BASE_API,
      data:data,
      headers: {'mp-Token': 123},//设置header信息
    }    
)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      });
  });
}

4.在main.js全局定义方法

import { post, get } from '@/utils/request.js';
// 定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$get = get;

5.在项目中使用

   //data是一个对象（传给后台的参数）
this.$post(url,data)
        .then(response => {//成功执行这里
         console.log(response)
        })
        .catch(response => {
          console.log(response);
        });

//params是一个对象（传给后台的参数）
this.$get(url,params)
        .then(response => {//成功执行这里
         console.log(response)
        })
        .catch(response => {
          console.log(response);
        });