Vue中使用axios以及axios的請求封裝（以移動端vant爲例）

1、項目安裝vant

2、執行命令安裝axios 　　（npm install axios）

3、封裝請求（將如下最終生成的js放在api文件夾下面的axios.js中，文件夾和js都是本身創建的，api的文件夾在src下面））

　　一、兩個方法，一個是請求以前的攔截，一個是響應後的攔截，請求以前的攔截器中能夠向裏面添加token，請求以後的攔截能夠對返回code的值作處理，好比token過時跳轉登陸等等

// http request攔截器 添加一個請求攔截器
axios.interceptors.request.use(function (config) {
    let token = window.localStorage.getItem("token")
    if (token) {
        //將token放到請求頭髮送給服務器,將tokenkey放在請求頭中
        config.headers.token = token;
        //也能夠這種寫法
        // config.headers['token'] = token;
    }

　　return config;

}, function (error) { Toast.fail('請求超時'); // Do something with request error return Promise.reject(error); });

　　

// 添加一個響應攔截器
axios.interceptors.response.use(function (response) {
    if (response.data && response.data.code) {
        if (response.data.message === 'token失效' || response.data.message === '請求頭中沒有token') {
            //未登陸
            Toast.fail("登陸信息已失效，請從新登陸");
            router.push('/login');
        }
        if (parseInt(response.data.code) === -1) {
            Toast.fail("請求失敗");
        }
    }
    return response;
}, function (error) {
    Toast.fail("服務器鏈接失敗");
    return Promise.reject(error);
})

　　　　二、接下來將axios的請求方法封裝一下（這裏說明一下，vue中會將全部的請求都默認在當前域名下）

let base = '';

//通用方法
export const POST = (url, params) => {
    const getTimestamp = new Date().getTime();
    return axios.post(`${base}${url}?timer=${getTimestamp}`, params).then(res => res.data)
}

export const GET = (url, params) => {
    const getTimestamp = new Date().getTime();
    return axios.get(`${base}${url}?timer=${getTimestamp}`, { params: params }).then(res => res.data)
}

export const PUT = (url, params) => {
    return axios.put(`${base}${url}`, params).then(res => res.data)
}

export const DELETE = (url, params) => {
    return axios.delete(`${base}${url}`, { params: params }).then(res => res.data)
}

export const PATCH = (url, params) => {
    return axios.patch(`${base}${url}`, params).then(res => res.data)
}

　　三、將以上全部內容整理一下，創建axios.js文件，js完整內容以下

import axios from 'axios'
import router from '../router/index'
import { Toast } from 'vant';

let token = '';

axios.defaults.withCredentials = false;
axios.defaults.headers.common['token'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';//配置請求頭

// http request攔截器 添加一個請求攔截器
axios.interceptors.request.use(function (config) {
    let token = window.localStorage.getItem("token")
    if (token) {
        //將token放到請求頭髮送給服務器,將tokenkey放在請求頭中
        config.headers.token = token;
        //也能夠這種寫法
        // config.headers['token'] = token;
    }
 return config;
}, function (error) {
    Toast.fail('請求超時');
    // Do something with request error
    return Promise.reject(error);
});

// 添加一個響應攔截器
axios.interceptors.response.use(function (response) {
    if (response.data && response.data.code) {
        if (response.data.message === 'token失效' || response.data.message === '請求頭中沒有token') {
            //未登陸
            Toast.fail("登陸信息已失效，請從新登陸");
            router.push('/login');
        }
        if (parseInt(response.data.code) === -1) {
            Toast.fail("請求失敗");
        }
    }
    return response;
}, function (error) {
    Toast.fail("服務器鏈接失敗");
    return Promise.reject(error);
})

let base = '';

//通用方法
export const POST = (url, params) => {
    const getTimestamp = new Date().getTime();
    return axios.post(`${base}${url}?timer=${getTimestamp}`, params).then(res => res.data)
}

export const GET = (url, params) => {
    const getTimestamp = new Date().getTime();
    return axios.get(`${base}${url}?timer=${getTimestamp}`, { params: params }).then(res => res.data)
}

export const PUT = (url, params) => {
    return axios.put(`${base}${url}`, params).then(res => res.data)
}

export const DELETE = (url, params) => {
    return axios.delete(`${base}${url}`, { params: params }).then(res => res.data)
}

export const PATCH = (url, params) => {
    return axios.patch(`${base}${url}`, params).then(res => res.data)
}

　　

　　3、在main,js中講以上封裝的方法掛載在vue的原型鏈上，方面後面調用

　　

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/vant.js";

import {POST} from './api/axios';
import {GET} from './api/axios';

Vue.prototype.postRequest = POST;
Vue.prototype.getRequest = GET;

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

　　4、以上工做完成以後在頁面中可這麼調用

　　post請求

　　this.postRequest(url,param).then(res => {})

　　get請求

　　this.getRequest(url,param).then(res => {})