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);
        });