技術標籤：axios呼叫gp服務

不點藍字，我們哪來故事？

前言：

什麼是axios，簡單的來說就是axios 是一個基於 promise 的 HTTP 庫，簡單的講就是可以傳送get、post等請求。axios 是一個輕量的 HTTP客戶端，它基於 XMLHttpRequest 服務來執行 HTTP 請求，支援豐富的配置，支援 Promise，支援瀏覽器端和 Node.js 端。自Vue2.0起，尤大大(Vue作者尤雨溪)宣佈取消對 vue-resource 的官方推薦，轉而推薦 axios。現在 axios 已經成為大部分 Vue 開發者的首選。

單獨封裝axios的重要性？

在使用基於VUE框架開發專案的過程中，肯定使用到axios進行網路請求，請求伺服器端得到資料、上傳、刪除和更新資料。但是把axios寫在main函式中，顯得main的程式碼過於“臃腫”，不美觀，而且有時一個專案中可能請求多個伺服器，都寫在main是不可行的，還有最重要的是，一旦axios的開發團隊不再進行維護，我們就需要更換，封裝以後方便以後維護，所以我們要單獨封裝axios，在以後開發專案中，如果一個功能多次被呼叫的話，建議也封裝成一個函式的形式，方便呼叫和維護。

第一步

在src目錄下建一個資料夾，命名為：“network”，意思是網路請求資料夾。

第二步

在該目錄下在再建立兩個子目錄，分別是"request.js"和"home.js"，後面這個"home.js"是我舉得一個列子，後面大家可以根據實際的專案需求來更改目錄的名字。

第三步

這步就到寫程式碼啦，如下圖所示：

request.js中的程式碼

import axios from 'axios' // 引入axios檔案export function request(config) {  const instance = axios.create({    baseURL:'http://xxx.xxx.xx.xx:8000/api/v1', // 請求資料的介面    timeout:5000 //設定時間超時，單位毫秒  })  //請求攔截  instance.interceptors.request.use(config => {    return config;  },err => {    console.log(err)  })  //響應攔截  instance.interceptors.response.use(res => {    return res.data  },error => {    console.log(error)  })  return instance(config)}
 

home.js中的程式碼，這是根據不同專案的需要來寫的，我這只是個實列，大家可以參考著來寫哦~~~~

import {request} from './request' // 引入剛剛建立的request.js檔案export function getHomeMultidata() {  return request({    url: '/home/multidata' // 具體的請求url尾部，其他的請求方那些可以在請求的那個頁面再寫，最好在這寫上  })}export function getGoodsData(type,page) {  return request({    url:'/home/data',// 具體的請求url尾部，其他的請求方那些可以在請求的那個頁面再寫，最好在這寫上    params:{// 傳遞引數      type,      page    }  })}

第四步

在單個vue頁面要引入，這步很重要，一定要引入！！！

import {getHomeMultidata,getGoodsData} from 'network/home'

第五步

就是在實際中使用啦

  methods:{      getHomeMultidata(){        getHomeMultidata().then(res => {          this.banners = res.data.banner.list;          this.recommends = res.data.recommend.list;        })      },    }

End