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

一、項目安裝vant

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

三、封裝請求（將以下最終生成的js放在api文件夾下面的axios.js中，文件夾和js都是自己建立的，api的文件夾在src下面））

　　1、兩個方法，一個是請求之前的攔截，一個是響應后的攔截，請求之前的攔截器中可以向里面添加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);
})

　　　　2、接下來將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)
}

　　3、將以上所有內容整理一下，建立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)
}

　　

　　三、在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");

　　四、以上工作完成之后在頁面中可這么調用

　　post請求

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

　　get請求

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