繁瑣的http請求多而複雜，這裡就將axios的get和post進行封裝，以方便後續在專案中方便的使用。

首先建立一個名為http.js的js然後下面就是http.js中的程式碼：

http.js

import axios from 'axios'
import qs from 'qs'
let localhosts = '這裡是要請求的url';
axios.interceptors.request.use(config => {
  // loading
  return config
}, error => {
  return Promise.reject(error)
});

axios.interceptors.response.use(response => {
  return response
}, error => {
  return Promise.resolve(error.response)
});
function checkStatus(response) {
  // loading
  // 如果http狀態碼正常，則直接返回資料
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response
    // 如果不需要除了data之外的資料，可以直接 return response.data
  }
  // 異常狀態下，把錯誤資訊返回去
  return {
    status: 404,
    msg: '網路異常'
  }
}

function checkCode(res) {
  // 如果code異常(這裡已經包括網路錯誤，伺服器錯誤，後端丟擲的錯誤)，可以彈出一個錯誤提示，告訴使用者
  if (res.status === 404) {
    // alert(res.msg)
  }
  if (res.data && (!res.data.success)) {
    // alert(res.data.error_msg)
  }
  return res
}
export default {
  post (url, data) {
    return axios({
      method: 'post',
      baseURL: localhosts,
      // https://cnodejs.org/api/v1
      url,
      data: qs.stringify(data),
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  },
    get (url, params) {
    return axios({
      method: 'get',
      baseURL: localhosts,
      url,
      params, // get 請求時帶的引數
      timeout: 10000,
      headers: {
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(
      (response) => {
        return checkStatus(response)
      }
    ).then(
      (res) => {
        return checkCode(res)
      }
    )
  }
}
 

寫到這裡http.js的內容也算是結束了。

下面還有就是api的一個封裝了：

api.js

export default {
  right: '/dev/reverse', // 正確路徑/topic/5433d5e4e737cbe96dcef312
  container:'/dev/history',
  error: '/topc/5433d5e4e737cbe96dcef312', // url錯誤
  backEnd: '/topic/5433d5e4e737cbe96dcef31' // 引數錯誤
}

這兩個js寫完一定要進行全域性的配置，或者說到時那個元件需要就給他單獨的引用也是可以的，我是直接將這個配置到全局裡面去了為了方便下面是在main.js中的引入程式碼：

main.js

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import http from './utils/http'
    import api from './utils/api'


    Vue.prototype.http = http;
    Vue.prototype.api = api;

    Vue.config.productionTip = false;

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: {App},
      template: '<App/>'
    });
 

一定要配置進去要不然沒有效果的！！！！！！

下面的就是在專案中的引用了這玩意主要就是配合vue來進行開發的所以我就只上獲取資料的程式碼了：

methods: {
  //獲取介面
  fetchDatas: async function (currentIndex, pageName) {
    let params = {
      index: currentIndex,
      pagesize: pageName,
    };
    const res = await this.http.get(this.api.container, params);//獲取成功
    if (res.status == 200) {
      this.getpage = res.data.data;
      this.pagedata = this.getpage.records;
      this.total = this.getpage.total;//拿到總條數
    } else {
      const dataError = await this.http.get(this.api.error, params);//獲取失敗
      if (dataError.status != 200) {
        console.info(dataError);
      }
    }
  }

在這裡就可以把你的引數什麼的直接放進去就可以呼叫了，到這裡也就結束了！！